javascript - 用图层绘制图像答案

【问题标题】：javascript - draw image with layersjavascript - 用图层绘制图像
【发布时间】：2016-07-07 13:44:56
【问题描述】：

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

【问题讨论】：

多层需要多个画布。每个画布都是一个层:)
我可以将它合并到一张图片中吗？
FabricJS 将让您（有效地）将 z-index 应用于它绘制的每个形状。请参阅之前的Q&A。
html5 - canvas element - Multiple layers的可能重复

标签： javascript canvas

【解决方案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();
});

【讨论】：