我应该在一个画布中使用多个图像吗？

什么是最佳实践？我应该为html5中的每个图像制作一个单独的画布标签，还是将多个图像放入一个画布中，以及如何才能做到这一点。我应该在一个画布中使用多个图像吗？

到目前为止我的代码：

var canvas = document.getElementById("e"); 
var context = canvas.getContext("2d"); 

var cat = new Image(); 
cat.src = "images/cartoonPaul01.jpg"; 
cat.onload = function() { 
    context.drawImage(cat, 0, 0, 169, 207); 
};

来源

2011-08-14 Cool Guy Yo

你可以动态地做到这一点，如果你这么倾向。来自异常艺术的muro使用一些基础画布 - 温度，缓冲区和背景。然后使用侧面的控件动态创建和删除图层。这很大程度上取决于你想要做什么。

如果您只是打印到画布上，并且不需要必须以需要动态的方式更改图像，则可以将它们全部绘制到一个画布上。如果您需要分层，请使用它。

动态帆布和上下文创建：

// This is not best practice, just an example using globals. 
var layers = []; 
var lyrCtx = []; 

createLayer = function() { 
    // Create the canvas. 
    layers.push(document.createElement('canvas')); 
    layers[layers.length - 1].setAttribute('id', 'layer'+layers.length-1); 

    // Create the context. Provided you do it in order, lyrCtx[i] should correlate to layers[i] 
    lyrCtx.push(layers[layers.length - 1].getContext("2d")); 

    // Handle context settings here. 
}

来源

2011-08-17 18:12:21 stslavik

你应该得到平衡。我通常在我的应用程序中使用4-6个画布层，并在其上绘制逻辑部分。

来源

2011-08-15 14:35:38 Shock

我应该在一个画布中使用多个图像吗？

回答

相关问题