使用图层绘制图像

Question

我可以在画布上绘制带有图层的图像吗？特别是使用织物.js或字面上的画布.js？如有任何信息或示例，将不胜感激，ty

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();
});