是否可以一次画多张画布？ [英] Is it possible to draw on multiple canvases at once?

问题描述

我的所有画布绘制函式都会开始这样：

All of my canvas drawing functions start something like this:

function drawMe(){

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

    var ctx = null;

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

    ...
}

在可变数量的画布上绘制相同的图像，是否有一些替代 getElementById（）（可能在jQuery？），可以用来轻松抓住多个

However I now want to draw the same image on a (variable) number of canvases, is there some alternative to getElementById() (perhaps in jQuery?) which can be used to easily grab more than one at once?

谢谢！

Josh

推荐答案

绘制多个画布将是非常低效的，因为渲染是最昂贵的操作之一你可以做。

drawing to multiple canvases will be extremely inefficient, because rendering is one of most expensive operations you can do.

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

what you want to do is to use buffer. you can simply draw from one canvas to another.

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 您已完成第一个画布上的所有绘图。

remember, you only need to call ctx.drawImage once - after you're done with all drawing on first canvas.

这篇关于是否可以一次画多张画布？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！