html - HTML5 Canvas 分层，居中？

Question

我将如何使用HTML5的画布在彼此之上制作多个画布层，同时在页面上正确居中（通过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 属性。