如何将两个画布元素放在一起？答案

【问题标题】：How can I lay two canvas elements on top of each other?如何将两个画布元素放在一起？
【发布时间】：2019-04-01 01:48:10
【问题描述】：

我想将两个画布元素放在一起。我已经尝试过了，但它们总是出现在另一个之下。 id为canvas1的canvas应该是下平面，canvas2应该是上平面。

<div class="container">
    <canvas class="canvas" id="canvas1" width="500" height="500"></canvas>
    <canvas class="canvas" id="canvas2" width="500" height="500"></canvas>
</div>

.container {
  display: inline-block;
  position: relative;
  float: left;
}

#canvas1,
#canvas2{
  position: absolute;
  top: 0;
  left: 0;
  background-color: transparent;
}

【问题讨论】：

标签： html css canvas

【解决方案1】：

我向#canvas1 添加了一个位置属性，并使用了z-index 属性。 z-index 越高，显示的越高。您所需要的只是让您想要的顶部的z-index 高于您想要的下方的z-index。

#canvas1 {
  position: relative;
  background: black;
  z-index: -1;
}
#canvas2{
  position: absolute;
  top: 0;
  left: 0;
  background-color: red;
  z-index: 0;
}

<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>

<div class="container">
    <canvas class="canvas" id="canvas1" width="500" height="500"></canvas>
    <canvas class="canvas" id="canvas2" width="500" height="500"></canvas>
</div>

</body>
</html>

【讨论】：

当我这样做时，顶部有黑色画布元素（canvas1），底部有红色画布元素（canvas2）。但我希望它们重叠。
@elli 也许我误解了一些东西。你想让它们稍微透明一点，这样你就可以看穿重叠的部分吗？如果没有，您是否有您想要实现的目标的示例图片？
下层应该是一个形状，例如一个矩形。我想上传一张图片到上层。尽管有图像，您仍然应该看到矩形。你明白我的意思吗？
如果画布元素为空，则将它们显示在彼此的顶部。但是如果一个对象在 canvas 元素内，它会显示一个在另一个元素之下。