0

我的目标是拥有一个 HTML/CSS 布局，用一些元素填充可用空间，但在该空间中拥有一个尽可能大的 2d 画布元素。

CSS flexbox 提供了获得所需布局的能力。但是，当画布的 CSS 大小发生变化时，必须重新绘制画布的后备存储，以使画布不会简单地扭曲（低分辨率图像拉伸过大，或者高分辨率图像被压扁并丢失细节）。

下面的代码（jsfiddle 上的代码）几乎实现了这个目标，但是当画布的大小由于 CSS3 动画而改变时，画布不会重绘。

HTML：

<button>I'm a button</button>
<canvas id="c"></canvas>
<p>text.</p>

CSS：

body {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
}
canvas {
    flex: auto;
    align-self: stretch;
}
button {
    align-self: center;
    transition:padding 2s;
}
button:hover {
    padding: 3em;
}

Javascript：

function redraw() {
    var cc = c.getContext("2d");
    c.width = c.clientWidth;
    c.height = c.clientHeight;
    cc.scale(c.width, c.height);
    cc.beginPath();
    cc.arc(0.5, 0.5, .5, 0, 2 * Math.PI);
    cc.fill();
}

// update on any window size change.
window.addEventListener("resize", redraw);

// first draw
redraw();
4

1 回答 1

0

有一个动画迭代事件。关于 sitepoint 的一篇文章（现在已关闭）指出，它在以下名称之一的所有浏览器上都可用：

animationiteration
webkitAnimationIteration
oanimationiteration
MSAnimationIteration
于 2013-08-14T15:11:24.463 回答