Question

我正在尝试创建一个简单的游戏，但我想知道如何在画布中实现3层，就像在Photoshop中一样。我希望背景为背景，透明的背景可以反映前景的背景，前景层将是主要的动画/渲染。这对表现来说是一个好点吗？另外，这里如何实现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

我建议在你的逻辑中处理这个问题：如果你需要更多的＆＃34;层，那么做三个功能，它的资源密集程度更低，更易于维护。只需创建新功能。不要弄乱你的东西。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

例如。

Answer 2

多个画布层绝对可以是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元素设置为绝对定位在容器元素中。

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

Html5中的3层画布

2 个答案: