Html5 中的 3 层 canvas

Question

我正在尝试创建一个简单的游戏，但我想知道如何在 canvas 中实现 3 层，就像在 photoshop 中一样。我想要背景作为背景，透明的是可以将背景反射到前景的东西，前景层是主要的animations/rendering。这将是一个很好的表现点吗？另外，这里的3层结构如何实现？

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

多个canvas层绝对可以是一个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;
}

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

您需要记住的最后一件事是要清除 canvases，您必须使用 context.clearRect 方法，以便 return canvas 改为透明，而不是用纯色填充。

Answer 2

我建议在您的逻辑中处理此问题：执行三个函数，资源密集度较低且更易于维护，如果您需要更多 "layers" 只需创建新函数。不要把你的 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 参数来设置图像的透明度。对于形状，请使用

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

例如。

Html5 中的 3 层 canvas

3 layered canvas in Html5

html

javascript

css

canvas