如何将两幅画布叠放在一起

How do I center two canvases on top of one another?

本文关键字：两幅 布叠放 在一起      更新时间：2023-09-26

我需要在另一个画布上显示一个HTML5画布。这一点我已经通过以下方式进行了管理：

<canvas id="lower" width="900" height="550" style="position: absolute; left: 0; top: 0; z-index: 0;"></canvas>
<canvas id="upper" width="900" height="550" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas>

然而，我似乎不知道如何将这两幅画布居中，同时将一幅放在另一幅之上。有什么想法吗？

将它们放入样式为的<div>中

div#canvasContainerId {
    position: relative;
    margin-left: auto;
    margin-right: auto;
    width: 900px;
}
  • CCD_ 2使得<canvas>es的absolute定位变得相对于其包含的<div>
  • auto的边距与固定的width一起位于<div>的中心

用text-align:center和position:relative制作一个外部容器，用position:relative制作一个内部容器，将画布放在内部容器中，移除两个画布上的left:0;top:0;，并移除画布下方的position:absolute。并确保在html中，下画布位于上画布之前，就像您所做的那样。

#container {
  text-align:center;
  position:relative;
}
#inner_container{
  position:relative;
}
#upper {
  z-index: 1;
}
#lower {
  position:absolute; z-index: 0;
}

http://jsfiddle.net/NW6Fx/

编辑：我认为如果您这样做，就不需要z-index属性。顺序只是html中哪个画布先出现，哪个是position:relative的问题。

您可以在它们之间放置一条特征线<br/>

或

可能会尝试为它们中的每一个提供以下css：

{
    margin:auto;
    clear:both;
}

对于绝对定位，您应该使用顶部。例如，对于第一个，输入top: 50px。这将把第一个元素从顶部移开50px。对于第二个，输入top: 100px。

相关文章：