Question

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

Answer 1

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

Answer 2

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

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

2 个答案: