javascript - レイヤーで画像を描画する

Question

レイヤーを使用してキャンバスに画像を描画することはできますか？特にfabric.jsやliterallycanvas.jsを使用していますか？任意の情報や例を参考にしてください。

Answer 1

レイヤーはソフトウェアの抽象化です。それらは、特定の順序（階層化）で処理される項目のグループを定義します。

何でもレイヤーができるので、レイヤーを作るのは簡単です。各レイヤーにすべてのオブジェクトをまとめてグループ化します。次に、レイヤーで定義された順序で、各レイヤー内のすべてのオブジェクトをレンダリングします。

非常に単純な層の例

var layers = []; // holds layers 
function addLayer(order){ /// creates and adds a layer 
    var l; 
    layers.push(l = { 
     order : order, 
     items : [], 
     render : function(){ 
      this.items.forEach(function(img){ 
       ctx.drawImage(img.bitmap,img.x,img.y); 
      }); 
    }); 
    return l; 

} 
// some items for the layers 
var img1 = { 
    bitmap : new Image("URL"), 
    x : 100, 
    y : 200, 
} 
var img2 = { 
    bitmap : new Image("URL"), 
    x : 300, 
    y : 200, 
} 
// create a layer order 1 
var lay1 = AddLayer(1); 
// add some items to lay1 
lay1.items.push(img1); 
lay1.items.push(img2); 
// add a second layer order 0 
var lay2 = AddLayer(0); 
lay1.items.push(img3); 
lay1.items.push(img4); 


// sort layers by order 
layers.sort(function(a,b){return a.order-b.order;}); 
// process each layer in the sorted order 
layers.forEach(function(layer){ 
    layer.render(); 
});