Javascript Html5中的3层画布

我试图创建一个简单的游戏，但我想知道如何在画布上实现3层，就像在photoshop中一样。我希望背景作为背景，透明的背景可以将背景反射到前景，前景层将是主要的动画/渲染。这是一个很好的表现点吗？另外，如何在这里实现3层结构

HTML

---

多个画布层绝对是一个好主意！如果每个场景只需绘制一次背景层，则可以多次重画前景，而无需担心重画背景会浪费时间

但是，它们需要是分层的，而不是嵌套的

<div id = "container" class = "container">
  <canvas id = "canvas_background" width = "800" height = "500"></canvas>
  <canvas id = "canvas_trans" width = "800" height = "500"></canvas>
  <canvas id = "canvas_foreground" width = "800" height = "500"></canvas>
</div>

这会将所有画布元素设置为绝对位于容器元素内

---

您需要记住的最后一件事是，要清除画布，您必须使用

上下文.clearRect

方法，以使画布恢复透明，而不是用纯色填充画布。

我建议在您的逻辑中处理此问题：执行三个函数，减少资源密集度，而且更易于维护，如果您需要更多的“层”，只需创建新功能即可。别把你的工作搞砸了

var-trackground=函数（）{
//处理图像
canvas2d.globalAlpha=1；
//绘制背景元素。
};
var drawTrans=函数（）{
//处理图像
canvas2d.globalAlpha=0.5；
//绘制透明元素。
};
var draw前台=函数（）{
canvas2d.globalAlpha=1；
//绘制前景元素。
};可能重复的哦，我认为应该嵌套它，以便正确分层所有它。无论如何，谢谢你的回答！我很感激。是的，我会画一次背景，在透明画布的帮助下，我可以在前景中行走我的角色（需要一路渲染）。这样行吗？这可能也是一件好事，嗯，我也想试试这个！谢谢你，伙计！
#container {
width: 800px;
margin: 20px auto;
height: 200px;
}

#canvas_background{
border: 1px solid #666;
position: absolute;
}

#canvas_trans{
position: absolute;
background-color: transparent;
z-index: 1;
}

#canvas_foreground{
position: absolute;
 }

<div id = "container" class = "container">
  <canvas id = "canvas_background" width = "800" height = "500"></canvas>
  <canvas id = "canvas_trans" width = "800" height = "500"></canvas>
  <canvas id = "canvas_foreground" width = "800" height = "500"></canvas>
</div>

.container {
  position: relative;
}

.container > canvas {
  position: absolute;
  top: 0;
  left: 0;
}