Question

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

CSS flexbox提供了获得所需布局的功能。但是，当画布的CSS大小改变时，必须重绘画布的后备存储，以便画布不会简单地失真（低分辨率图像拉伸得太大，或高分辨率图像压扁并丢失细节）。

以下代码（code on 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();

Answer 1

有一个animationiteration事件。一篇关于sitepoint的文章（现在已经关闭）声明，它可以在以下名称之一的所有浏览器上使用：

animationiteration
webkitAnimationIteration
oanimationiteration
MSAnimationIteration

如何在动画时更改HTML 2d画布大小？

1 个答案: