Question

我的所有画布绘图功能都是这样的：

function drawMe(){

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

    var ctx = null;

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

    ...
}

但是我现在想在（可变）数量的画布上绘制相同的图像，是否有getElementById()的替代品（可能在jQuery中？）可以用来轻松地一次抓取多个？

谢谢！

约什

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);

这是一个fiddle。

请记住，在第一幅画布上完成所有绘图后，您只需要调用ctx.drawImage一次。

Answer 2

使用jQuery，如果你执行$（'。blah'），你将获得该类的所有元素'blah'。因此，如果你给你所有的画布，那么你只需要遍历所有画布并在那一点上画出每一幅画。

理想的是只获取所有上下文一次，所以除非drawMe只被调用一次，否则你应该只收集一次所有上下文，然后每次将该数组传递到drawMe被称为。

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

如果要在几幅画布上绘制复杂图像，最好是：

将复杂图像绘制到第一个画布。
通过drawImage()（可以使用画布参数）将该画布粘贴到其他画布。

这样你只需复制图像像素，而不是重复绘制复杂的东西。但是，如果它只是一个单一的图像，那么直接绘制它就像其他答案所提出的那样更好。

Answer 5

为每个画布指定一个类，并使用该类遍历每个画布。

Answer 6

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

是否可以同时绘制多幅画布？

6 个答案: