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

そのためのanimationiterationイベントがあります。sitepoint に関する記事 (現在停止中) には、次の名前のいずれかですべてのブラウザーで利用できると記載されています。

animationiteration
webkitAnimationIteration
oanimationiteration
MSAnimationIteration
于 2013-08-14T15:11:24.463 に答える