Html5中的3层画布

Question

我正在尝试创建一个简单的游戏，但我想知道如何在画布中实现 3 层，就像在 Photoshop 中一样。我希望背景作为背景，透明的可以将背景反射到前景，前景层将是主要的动画/渲染。这对性能来说是一个好点吗？还有，这里怎么实现三层结构呢？

HTML

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

                </canvas>
            </canvas>
        </canvas>
    </div>

CSS

#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;
 }

Answer 1

多个画布层绝对可以是good thing for performance！如果您的背景层只需要在每个场景中绘制一次，那么它可以让您多次重绘前景，而不必担心重绘背景会浪费时间。

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

<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>

谢天谢地，这对于 CSS 来说是微不足道的。我们可以使用绝对定位，并利用 DOM 元素默认透明这一事实。

.container {
  position: relative;
}

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

这会将所有画布元素设置为绝对定位在容器元素中。

您需要记住的最后一件事是，要清除画布，您必须使用context.clearRect 方法，以便将画布恢复为透明状态，而不是用纯色填充它。

Answer 2

我建议在您的逻辑中处理此问题：执行三个功能，它的资源密集度较低，并且更易于维护，如果您需要更多“层”只需创建新功能。不要把你的 dom 搞砸了。

var drawBackground = function(){
  //works with images
  canvas2d.globalAlpha = 1;
  //draw background elements.
};

var drawTrans = function(){
  //works with images
  canvas2d.globalAlpha = 0.5;
  //draw Transparent elements.
};

var drawForeground = function(){
  canvas2d.globalAlpha = 1;
  //draw foreground  elements.
};

在它们中，您只绘制该层的项目，您可以在绘制图像之前通过设置 globalAlpha 参数来设置图像的透明度。对于shapen使用

canvas2d.fillStyle = "rgba(255, 255, 255, 0.5)";

例如。