有没有可能同时在多个画布上绘画？

Question

我的所有画布绘图函数都是这样开始的：

function drawMe(){

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

    var ctx = null;

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

    ...
}

然而，我现在想在（变量数量的）多个画布上绘制相同的图像，有没有一些替代方法可以代替getElementById()（也许是在jQuery中？），可以轻松地一次性获取多个元素？

谢谢！

乔希

- Joshua

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

- wildcard

Answer 2

有趣...我相信这不是最好的解决方案(我不完全确定它会不会起作用!), 它假定存在一个类来标识你的画布，但请尝试以下方法:

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

- stslavik

Answer 3

使用jQuery，如果你输入$('.blah')，将会获取到所有类名为'blah'的元素。因此，如果你给所有画布都加上这个类名，那么你只需遍历它们并在每个画布上绘制即可。

最好是只获取所有上下文一次，所以除非drawMe仅被调用一次，否则你应该只收集所有上下文一次，然后将该数组传递给每次调用drawMe。

- Simon Sarris

Answer 4

如果您需要在多个画布上绘制复杂图像，最好的方法是：

1. 将复杂图像绘制到第一个画布上。
2. 通过 drawImage()（可以接受画布参数）将该画布粘贴到其他画布上。

这样做可以避免重复绘制复杂的图像，而只需复制图像像素。但如果只是单张图片，那么直接像其他答案所建议的那样绘制可能更好。

- AshleysBrain

Answer 5

给每个画布分配一个类，并使用该类循环遍历每个画布。

- tskuzzy

Answer 6

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

- Shock