Должен ли я использовать несколько изображений на одном холсте?

Question

Что такое лучшая практика?Должен ли я сделать отдельный тег canvas для каждого изображения в 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

Вы можете сделать это динамически, если вы так склонны.Муро от девиантного искусства использует несколько базовых холстов - темп, буфер и фон.Затем вы динамически создаете и удаляете слои, используя боковой элемент управления.Это во многом зависит от того, что вы хотите сделать.

Если вы просто печатаете на холсте, и вам не нужно обязательно изменять изображения таким образом, который требует динамичности, вы можете нарисовать их все в однохолст.Если вам нужно наслоение, используйте его.

Динамическое создание холста и контекста:

// 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 слоев холста в своем приложении и рисую на них логическую часть.