HTML5キャンバスにレイヤーを実装する

HTML5キャンバスにPhotoshopのようなレイヤーを実装しようとしています。現在私は2つのアイデアがあります。最初に、多分シンプルな考え方は次のようにそれぞれの層のための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>

レイヤーに描くこの方法 - それは実際には「層」になります。透明な位置のレイヤーは、レイヤー（キャンバス）の下まで見ることができます。レイヤスタッキングは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