html5キャンバスのキャンバス

Question

既存のキャンバスの中にキャンバスを置くことはできますか？できれば、html5でやってください。

Answer 1

質問を解釈する方法は2つあります。

<canvas id="outer"> 
    <canvas id="inner"></canvas> 
</canvas> 

これは法的（validator.nuによる）が、無意味である：一つは、あなたが実際に巣このようなcanvas要素自体を、に意味ということです。 canvas要素内のコンテンツはフォールバック用です。 canvas要素内のコンテンツが使用される唯一の方法は、ブラウザがcanvasをサポートしていない場合です。この場合、内部のcanvas要素は表示されません。

質問を解釈するもう1つの方法は、別のキャンバスに表示された画像を別のキャンバスに表示することです。これは非常に簡単で、context.drawImage()の最初のパラメータとしてcanvas要素を使用できます。あなたは2つのcanvasの要素がある場合：

<canvas id="c1" width="200" height="200"></canvas> 
<canvas id="c2" width="200" height="200"></canvas> 

を次にthis script (using jQuery)は最初canvas上に描画した後、第2 canvasへの画像の4倍という追加します。

var c1 = $('#c1'); 
var ctx1 = c1[0].getContext('2d'); 

ctx1.fillRect(50,50,100,100); 

var c2 = $('#c2'); 
var ctx2 = c2[0].getContext('2d'); 

ctx2.drawImage(c1[0],0,0,100,100); 
ctx2.drawImage(c1[0],100,0,100,100); 
ctx2.drawImage(c1[0],0,100,100,100); 
ctx2.drawImage(c1[0],100,100,100,100); 

しかし、再び、なぜでしょうか？あなたはjust using one上述した第2 canvasの画像を複製することができます。

var c1 = $('#c1'); 
var ctx1 = c1[0].getContext('2d'); 

ctx1.fillRect(25,25,50,50); 
ctx1.fillRect(125,25,50,50); 
ctx1.fillRect(25,125,50,50); 
ctx1.fillRect(125,125,50,50); 

だから、要約すると：はい、それは可能だが、それは簡単な使用には本当に必要はありません。

Answer 2

キャンバスを別のキャンバスの内側にネストすることは絶対に無意味です。ブラウザがcanvasをサポートしていない場合、ページにはcanvasタグ内の内容しか表示されません。
<canvas id="background">fallbacks/polyfills go in here...</canvas> <canvas id="foreground">.. or here, but not other canvases.</canvas>