javascript - 如何在 Canvas 框上方放置一个 Canvas 框？

Question

我想要两个 Canvas 方 block 彼此叠置。我知道如何在 Canvas 上绘画，但我需要知道如何将 Canvas 放在 Canvas 上。我尝试配制药水，但没有成功。

<canvas id="Canvas1" width="350" height="300"
style="border:6px solid black;">
</canvas>

<canvas id="Canvas2" width="350" height="300"
style="border:6px solid black;">
</canvas>

无论我做什么，他们都只是想分开。

Answer 1

您需要将它们都放在 position:relative 的 div 中，然后将两个 Canvas 的位置设置为 absolute。然后它们都将位于容器的左上角。使用 z-index 指定哪个位于顶部，使用 left 和 top 调整位置。

<div style="position:relative">
<canvas id="Canvas1" width="350" height="300"
style="border:6px solid black; position: absolute">
</canvas>

<canvas id="Canvas2" width="200" height="200"
style="border:6px solid black; position:absolute">
</canvas>
</div>

请注意，我调整了第二个的大小以更好地显示位置。