1つのキャンバスに複数の画像を使用すべきですか？

Question

ベストプラクティスとは何ですか？ html5の各画像に別々のキャンバスタグを付けるか、それとも1つのキャンバスに複数の画像を置くのと同じように機能させるべきか、どうすればいいでしょうか。これまで

私のコードは：

var canvas = document.getElementById("e"); 
var context = canvas.getContext("2d"); 

var cat = new Image(); 
cat.src = "images/cartoonPaul01.jpg"; 
cat.onload = function() { 
    context.drawImage(cat, 0, 0, 169, 207); 
}; 

Answer 1

このようにすることができます。逸脱した芸術からのミュロは、いくつかの基本キャンバス（一時、バッファー、背景）を使用します。次に、サイドのコントロールを使用してレイヤーを動的に作成および削除します。それは主にあなたがしたいことにかかっています。

キャンバスに印刷するだけで、ダイナミズムを必要とするような方法でイメージを変更する必要がない場合は、すべてを1つのキャンバスに描画できます。レイヤーが必要な場合は、それを使用します。

ダイナミックキャンバスおよびコンテキスト作成：

// This is not best practice, just an example using globals. 
var layers = []; 
var lyrCtx = []; 

createLayer = function() { 
    // Create the canvas. 
    layers.push(document.createElement('canvas')); 
    layers[layers.length - 1].setAttribute('id', 'layer'+layers.length-1); 

    // Create the context. Provided you do it in order, lyrCtx[i] should correlate to layers[i] 
    lyrCtx.push(layers[layers.length - 1].getContext("2d")); 

    // Handle context settings here. 
} 

Answer 2

あなたはバランスを取得する必要があります。私は通常、アプリで4-6のキャンバスレイヤーを使用し、それらに論理的な部分を描画します。