Html 有可能一次画多张画布吗？

我所有的画布绘制功能都是这样开始的：

function drawMe(){

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

    var ctx = null;

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

    ...
}

但是，我现在想在（可变）数量的画布上绘制相同的图像，是否有其他方法可以替代

getElementById（）

（可能在jQuery中？）来轻松地一次抓取多个画布

谢谢

Josh

使用jQuery，如果您使用$（'.blah'），您将获得类'blah'的所有元素。所以，如果你把所有的画布都交给这个类，你只需要迭代它们，然后在每个画布上都画

---

不过，最好只获取一次所有上下文，因此除非只调用一次

drawMe

，否则您应该只收集一次所有上下文，然后每次调用时将该数组传递到

drawMe

。

有趣。。。我相信这不是最好的解决方案（我不完全确定它是否可行！），并且它假设一个类可以用来标识画布，但请尝试以下方法：

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

var画布，上下文，imgdata=0；
函数init（）{
canvases=document.getElementsByClassName（'cvs-class'）；
上下文=[]；
for（var i=0；i对于（var i=0；i为每个画布指定一个类，并使用该类循环遍历每个画布。
如果要在多个画布上绘制复杂图像，最好：

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

在第一个画布上绘制复杂图像
通过
drawImage（）
（可采用画布参数）将该画布粘贴到其他画布
通过这种方式，您只需复制图像像素，而不是重复绘制复杂的内容。但是，如果只是一幅图像，则最好像其他答案所建议的那样直接绘制该图像。
绘制多幅画布效率极低，因为渲染是最昂贵的操作之一。

您要做的是使用缓冲区。您可以简单地从一个画布绘制到另一个画布

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
一次