css - 由于动画而改变时如何更新 HTML 2d Canvas 大小？

Question

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

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

下面的代码 ( code on jsfiddle ) 几乎完成了这个目标，但是当 Canvas 的大小由于 CSS3 动画而改变时不会重绘 Canvas 。

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();

Answer 1

有一个 animationiteration事件。sitepoint 上的一篇文章(现已下线)指出，它可以在所有浏览器上使用以下名称之一:

animationiteration
webkitAnimationIteration
oanimationiteration
MSAnimationIteration