Можно ли рисовать на нескольких холстах одновременно?

Question

Все мои функции рисования на холсте начинаются примерно так:

function drawMe(){

    var canvas = document.getElementById('canvas-id');

    var ctx = null;

    ctx = canvas.getContext('2d');

    ...
}

Однако теперь я хочу нарисовать одно и то же изображение на (переменном) количестве полотен, есть ли какая-нибудь альтернатива getElementById() (возможно, в jQuery?), Которую можно использовать для простого захвата более одного одновременно?

Спасибо!

Josh

Answer 1

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

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

var canvas1 = document.getElementById("canvas1");
var canvas2 = document.getElementById("canvas2");

var ctx1 = canvas1.getContext("2d");
var ctx2 = canvas2.getContext("2d");

ctx1.fillStyle = "black";
ctx1.fillRect(10, 10, 10, 10);

ctx2.drawImage(canvas1, 0, 0);

вот скрипка .

помните, вам нужно всего лишь один раз вызвать ctx.drawImage - после того, как вы закончите со всем рисованием на первом холсте.

Answer 2

Если вы рисуете сложное изображение на нескольких холстах, может быть лучше:

1. Нарисуйте сложное изображение на первом холсте.
2. Вставьте этот холст надругие холсты через drawImage() (который может принимать параметр canvas).

Таким образом, вы просто копируете пиксели изображения, а не рисуете что-то сложное несколько раз.Если это всего лишь одно изображение, то, вероятно, лучше просто нарисовать это непосредственно, как предлагают другие ответы.

Answer 3

Интересно ... Я уверен, что это не лучшее решение (я не совсем уверен, что оно будет работать!), И оно предполагает класс, по которому можно идентифицировать ваш холст, но попробуйте это:

var canvases, contexts, imgdata = 0;

function init() {
  canvases = document.getElementsByClassName('cvs-class');
  contexts = [];
  for(var i = 0; i < canvases.length; i++) {
    contexts[i] = canvases[i].getContext('2d');  //initialize each canvas with context.
  }
}

function drawToCanvas() {
  // Do your drawing on canvases[0];
  imgdata = contexts[0].getImageData(0,0,canvases[0].width,canvases[0].height);
  paintToAllContexts();
}

function paintToAllContexts() {
  for(var i=0; i<canvases.length; i++) {
    contexts[i].putImageData(imgdata,0,0);
  }
}

function document.getElementsByClassName(class) {
  var nodes = [];
  var cl = new RegExp('\\b'+cl+'\\b');
  var el = this.getElementsByTagName('*');
  for(var i = 0; i < el.length; i++) {
    var cls = el[i].className;
    if(cl.test(cls)) nodes.push(el[i]);
  }
  return nodes;
}

Answer 4

В jQuery, если вы сделаете $ ('. Blah'), вы получите все элементы класса 'blah'. Поэтому, если вы дадите всем своим полотнам этот класс, вы можете просто пройти их все и нарисовать каждый из них в этот момент.

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

Answer 5

var allCanvases = document.getElementsByTagName('canvas');

Answer 6

Дайте каждому холсту класс и переберите каждый холст с классом.