HTML5画布分层，并居中？

Question

我将如何使用HTML5 5的画布使多层画布层在彼此之上，同时正确地在页面上居中(通过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中设置画布元素的高度是，而不是，这与将高度和宽度设置为每个画布标记的HTML属性相同。在CSS中将它们设置为100%不会有什么坏处，但是您肯定应该将它们设置为HTML。