Html5中的3層畫布

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

我建議在你的邏輯中處理這個問題：做三個函數，它的資源密集程度更低，更易於維護，如果你需要更多的“層”，只需創建新的函數。 不要弄亂你的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)"; 

例如。

Answer 2

多個畫布層絕對是性能的好東西 ！ 如果您的背景圖層只需要在每個場景中繪制一次，那么它允許您重繪前景很多次，而不必擔心浪費時間重繪背景。

但是，它們需要分層 而不是嵌套 。

<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方法，以便將畫布返回透明度，而不是用純色填充它。