複数のキャンバスを一度に描画できますか？

Question

私のキャンバスの描画機能のすべてがこのような何かを起動します。

function drawMe(){ 

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

    var ctx = null; 

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

    ... 
} 

は、しかし、私は今、キャンバスの（変数）数に同じ画像を描きたい、getElementById()にはいくつかの選択肢がある（おそらく、jQueryのでは？）一度に複数のものを簡単につかむために使うことができますか？

ありがとうございます！あなたは$（「何とか」）を行う場合

jQueryを使ってジョシュ

Answer 1

レンダリングが最も高価な操作の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); 

ここにはfiddleです。

最初のキャンバスですべての図面を終えたら、ctx.drawImageに一度だけ電話する必要があります。

Answer 2

、あなたはクラスの何とか "のすべての要素を取得します。だから、あなたがすべてのキャンバスをそのクラスに与えるならば、あなたはそれらをすべて反復し、その時点でそれぞれのキャンバスを描画することができます。

drawMeが一度だけ呼び出されない限り、すべてのコンテキストを一度だけ取得してから、その配列を呼び出すたびにdrawMeに渡す必要があります。

Answer 3

興味深い...私はそれが最善の解決策（私はそれがうまくいく全くわからない！）、そしてそれはあなたのキャンバスを識別するためのクラスを想定しているが、これを試してみないと確信しています：

を

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

Answer 4

各キャンバスにクラスを割り当て、各キャンバスにクラスをループします。

Answer 5

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

Answer 6

あなたは、いくつかのキャンバスへの複雑な画像を描画している場合は、それが良いかもしれない：

1. は、最初のキャンバスに、複雑な画像を描画します。
2. drawImage()（キャンバスパラメータを使用することができます）経由で他のキャンバスにキャンバスするペーストを貼り付けます。

この方法では、何か複雑な描画を繰り返すのではなく、画像のピクセルをコピーするだけです。しかし、単なる画像の場合は、他の回答のように直接描画する方が良いでしょう。