html - レイヤー内の HTML5 Canvas と中央揃え?

Question

HTML5のcanvasを使用して、( CSS3を介して)ページの中央に適切に配置しながら、複数のキャンバス レイヤーを互いに重ね合わせるにはどうすればよいですか? 両方のステップを適切に実行するのに問題があるようです。助言がありますか？

Answer 1

私がお勧めするのは、すべてのタグを次のようなcanvas単一のタグに含めることです。div

<div id="canvasHold">
    <canvas id="canvas1"></canvas>
    <canvas id="canvas2"></canvas>
    <canvas id="canvas3"></canvas>
</div>

そして、対応する CSS を中央に配置します。

#canvasHold {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 800px;
    height: 600px;
    margin-left: -400px; /* Negative half of the width */
    margin-top: -300px; /* Negative half of the height */
}

#canvasHold canvas {
    width: 100%;
    height: 100%;
}

もちろん、CSS で canvas 要素の高さを設定することは、各 canvas タグの HTML 属性として高さと幅を設定することと同じではありません。それらを CSS で設定しても害はありませんが100%、必ず HTML 属性として設定する必要があります。