html5의 캔버스 안에 캔버스

Question

캔버스를 기존 캔버스 안에 넣을 수 있습니까? 가능한 경우 html5에서 수행하십시오.

Answer 1

질문을 해석하는 데 가능한 두 가지 방법이 있습니다. 하나는 의미이다이 같은 사실 둥지 canvas 요소 자체에 :

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

이 (validator.nu에 따라) 법적으로 허용되지만 무의미. canvas 요소의 콘텐츠는 대체 콘텐츠 용입니다. canvas 요소의 콘텐츠가 사용되는 유일한 방법은 브라우저가 canvas을 지원하지 않는 경우입니다.이 경우 내부 canvas 요소는 표시되지 않습니다.

질문을 해석 할 수있는 다른 방법은 한 캔버스에 표시된 이미지를 다른 캔버스에 표시하는 것입니다. 이것은 매우 간단하며, context.drawImage()의 첫 번째 매개 변수로 canvas 요소를 사용할 수 있습니다. 두 canvas 요소가있는 경우 :

는

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

그런 다음 this script (using jQuery) 첫 번째 canvas에 그릴 것입니다 다음 두 번째 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); 

그러나 다시, 왜 것? 당신은 just using one 위의 두 번째 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>