html - html5のキャンバス内のキャンバス

Question

キャンバスを既存のキャンバス内に配置できますか?可能であれば、html5 でそれを行うのを手伝ってください。

Answer 1

あなたの質問を解釈する方法は 2 つあります。canvas1 つは、次のように要素自体を実際にネストすることです。

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

これは ( validator.nuによると) 合法ですが、無意味です。要素内のコンテンツcanvasはフォールバック用です。要素内のコンテンツcanvasが使用される唯一の方法は、ブラウザーが をサポートしていない場合です。canvasその場合、いずれにしても内部canvas要素は表示されません。

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

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

次に、このスクリプト (jQuery を使用)は最初に描画し、canvasそれを画像として 2 番目に 4 回追加しcanvasます。

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

しかし、繰り返しになりますが、なぜですか？1つだけを使用してcanvas、上記の2番目の画像を複製できます。

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. だから、robertcが言ったことをしてください：
<canvas id="background">fallbacks/polyfills go in here...</canvas> <canvas id="foreground">.. or here, but not other canvases.</canvas>