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

【问题标题】：Should I use multiple images in one canvas?我应该在一个画布中使用多个图像吗？
【发布时间】：2011-10-26 21:11:48
【问题描述】：

什么是最佳实践？我应该为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);
};

【问题讨论】：

标签： html image html5-canvas

【解决方案1】：

如果您愿意，您可以动态地执行此操作。来自 deviant art 的 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.
}

【讨论】：

【解决方案2】：

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

【讨论】：