如何使位置大小相同的双Canvas元素背景可见、场景层透明？

要让背景层可见同时场景层保持透明，核心是处理好两个Canvas的堆叠顺序和场景层的透明度控制，以下是具体步骤和示例：

1. 用CSS定位让两个Canvas完全重叠 #

因为两个Canvas尺寸和位置完全相同，我们需要用绝对定位让它们精准重叠，避免布局偏移：

canvas {
  position: absolute;
  top: 0;
  left: 0;
  /* 这里设置你需要的尺寸，注意要和Canvas元素的width/height属性一致 */
  width: 800px;
  height: 600px;
}

2. 控制堆叠顺序，确保背景层在下方 #

有两种方式实现：

• 利用HTML自然顺序：HTML中后出现的元素默认堆叠层级更高，所以把背景层放在前面，场景层放在后面，场景层会自动覆盖在背景层上方。
• 手动设置z-index：如果HTML顺序无法调整，给背景层设置更低的z-index值：

#backgroundCanvas {
  z-index: 1; /* 背景层层级更低 */
}
#sceneCanvas {
  z-index: 2; /* 场景层层级更高，在上方 */
}

3. 确保场景层保持透明 #

场景层默认是透明的，但如果你的代码里有fillRect填充整个画布的操作（比如填充白色），一定要移除这部分代码，或者将填充色设置为完全透明：

// ❌ 不要这样写（会遮挡背景）
// sceneCtx.fillStyle = "#ffffff";
// sceneCtx.fillRect(0, 0, sceneCanvas.width, sceneCanvas.height);

// ✅ 直接绘制需要的场景元素即可，画布保持透明
sceneCtx.fillStyle = "#ff5722";
sceneCtx.beginPath();
sceneCtx.arc(400, 300, 50, 0, Math.PI * 2);
sceneCtx.fill();

完整示例代码 #

HTML #

<canvas id="backgroundCanvas" width="800" height="600"></canvas>
<canvas id="sceneCanvas" width="800" height="600"></canvas>

CSS #

canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 800px;
  height: 600px;
}

#backgroundCanvas {
  z-index: 1;
}

#sceneCanvas {
  z-index: 2;
}

JavaScript #

// 绘制背景层
const bgCanvas = document.getElementById('backgroundCanvas');
const bgCtx = bgCanvas.getContext('2d');

// 填充背景色
bgCtx.fillStyle = "#e0f7fa";
bgCtx.fillRect(0, 0, bgCanvas.width, bgCanvas.height);

// 添加一些背景细节
bgCtx.strokeStyle = "#b2ebf2";
for(let x = 0; x < bgCanvas.width; x += 50) {
  bgCtx.beginPath();
  bgCtx.moveTo(x, 0);
  bgCtx.lineTo(x, bgCanvas.height);
  bgCtx.stroke();
}
for(let y = 0; y < bgCanvas.height; y += 50) {
  bgCtx.beginPath();
  bgCtx.moveTo(0, y);
  bgCtx.lineTo(bgCanvas.width, y);
  bgCtx.stroke();
}

// 绘制场景层（透明，仅绘制元素）
const sceneCanvas = document.getElementById('sceneCanvas');
const sceneCtx = sceneCanvas.getContext('2d');

// 绘制一个红色圆形作为场景元素
sceneCtx.fillStyle = "#ff5722";
sceneCtx.beginPath();
sceneCtx.arc(400, 300, 50, 0, Math.PI * 2);
sceneCtx.fill();

这样设置后，场景层会覆盖在背景层上方，同时因为场景层没有填充全屏不透明背景，你就能清晰看到下面的背景层内容，同时场景层的元素也能正常显示。

内容的提问来源于stack exchange，提问作者Manuel