我所有的 Canvas 绘图函数都是这样开始的:
function drawMe(){
var canvas = document.getElementById('canvas-id');
var ctx = null;
ctx = canvas.getContext('2d');
...
}
但是我现在想在(可变)数量的 Canvas 上绘制相同的图像,是否有一些替代 getElementById()
(可能在 jQuery 中?)可以用来轻松获取更多一次不止一个?
谢谢!
乔希
最佳答案
在多个 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 上的所有绘图之后。
关于html - 是否可以一次在多个 Canvas 上绘制?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6944843/