在HTML5畫布中實現圖層

我即將在HTML5畫布中實現類似Photoshop的圖層。目前我有兩個想法。第一個，也許是簡單的想法是有像每層Canvas元素：當你畫一個層在HTML5畫布中實現圖層

<canvas id="layerName" width="320" height="240" style="position: absolute; left: 0; top: 0; z-index: 1;"></canvas> 
<canvas id="layerName" width="320" height="240" style="position: absolute; left: 0; top: 0; z-index: 2;"></canvas> 
<canvas id="layerName" width="320" height="240" style="position: absolute; left: 0; top: 0; z-index: 3;"></canvas>

這樣 - 它實際上將轉到「層」。可以看到透明位置的圖層到圖層下面（Canvases）。層堆疊由z-index屬性控制。

第二思想是使用一個單一的畫布元件和實現一些邏輯來處理層像在這種情況下：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Test</title> 
     <script> 
      window.addEventListener('load', function() { 
       var canvas = document.getElementById("canvas"); 
       var ctx = canvas.getContext("2d"); 

       var order = 0; 

       function drawLayer1() { 
        ctx.fillStyle = "rgb(200,0,0)"; 
        ctx.fillRect (10, 10, 55, 50); 
       } 

       function drawLayer2() { 
        ctx.fillStyle = "rgba(0, 0, 200, 0.5)"; 
        ctx.fillRect (30, 30, 55, 50); 
       } 

       function draw() { 
        ctx.clearRect(0, 0, 256, 256); 

        if (order === 0) { 
         drawLayer1(); 
         drawLayer2(); 
        } 
        else { 
         drawLayer2(); 
         drawLayer1(); 
        } 
       } 

       setInterval(draw, 250); 
       setInterval(function() { 
        order = 1 - order; 
       }, 200); 
      }, false); 
     </script> 
    </head> 
    <body> 
     <canvas id="canvas" width="256px" height="256px"></canvas> 
    </body> 
</html>

在上面的代碼在兩個層會改變堆疊順序每隔200毫秒。

所以，問題是，哪種方式是最好的方式？這兩種方法的優缺點是什麼？

來源

2010-12-12 Tower