html - 是否可以一次在多个 Canvas 上绘制？

Question

我所有的 Canvas 绘图函数都是这样开始的:

function drawMe(){

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

    var ctx = null;

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

    ...
}

但是我现在想在(可变)数量的 Canvas 上绘制相同的图像，是否有一些替代 getElementById()(可能在 jQuery 中？)可以用来轻松获取更多一次不止一个？

谢谢!

乔希

Answer 1

在多个 Canvas 上绘图将极其低效，因为渲染是您可以执行的最昂贵的操作之一。

你想做的是使用缓冲区。您可以简单地从一个 Canvas 绘制到另一个 Canvas 。

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 - 在您完成第一个 Canvas 上的所有绘图之后。