如何将两个大小相同的画布叠放在一起？

Question

如何将两个大小相同的画布叠放在一起？

12

下面是代码。我希望将movementCanvas放在canvas下面。

<html>
<head>
  <script type="text/javascript" src="game.js"></script>
</head>
<body>

  <canvas id="canvas" width="710" height="597" style="border:1px solid #c3c3c3;">
    <p>Your browser doesn't support canvas!</p>
  </canvas>

  <canvas id="movementCanvas" width="710" height="597" style="border:1px solid #c3c3c3;">
  </canvas>

</body>
</html>

第二个问题。在更高的层次上，我试图隐藏下面的画布。movementCanvas是一个彩色编码的地图，在点击时我将查找那里的值，访问像素的唯一方法是使用HTML5画布和上下文。顶部的“画布”是前端，应该看起来很不错。听起来这样做是合理的吗？

- user422318

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Evan Hahn · Accepted Answer

使用CSS的position: absolute。将以下CSS添加到您的页面：

canvas {
    position: absolute;
    top: 0;
    left: 0;
}

这将使两个画布都放置在同一位置：左上角的最顶部。

你可能想把它们放在包装元素中，该元素需要设置为position: relative，以便其子元素也能够被定位。例如，你的HTML代码应如下所示：

<div class="wrapper">
    <canvas id="canvas1" width="400" height="300"></canvas>
    <canvas id="canvas2" width="400" height="300"></canvas>
</div>

你的CSS将会如下所示：

.wrapper {
    position: relative;
    width: 400px;
    height: 300px;
}

.wrapper canvas {
    position: absolute;
    top: 0;
    left: 0;
}

然后，您可以像定位其他内容一样来定位包装div。