在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