Płótno wewnątrz płótna html5

Question

Czy możemy umieścić płótno wewnątrz istniejącego płótna? Jeśli możemy, pomóżcie to zrobić w html5.

Answer 1

Istnieją dwa możliwe sposoby interpretacji pytania. Jednym z nich jest, że masz na myśli faktycznie gniazdo canvas same elementy, takie jak ten:

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

To jest legalne (według validator.nu), ale bezcelowe. Zawartość wewnątrz elementu canvas służy do wycofania. Jedynym sposobem wykorzystania zawartości elementu canvas jest, jeśli przeglądarka nie obsługuje canvas, w takim przypadku wewnętrzny element canvas i tak nie będzie widoczny.

Innym możliwym sposobem na zinterpretowanie pytania jest wyświetlenie obrazu pokazanego na jednym płótnie w innym. Jest to dość proste, element canvas może być użyty jako pierwszy parametr dla context.drawImage(). Jeśli masz dwie canvas elementy:

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

Następnie this script (using jQuery) wyciągnie na pierwszym canvas a następnie dodać, że cztery razy jako obraz do drugiego 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); 

ale znowu, dlaczego prawda? Można replikować obraz drugiego canvas powyżej just using one:

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

Tak w skrócie: tak, to jest możliwe, ale nie jest to naprawdę konieczne prostego stosowania.

Answer 2

Bezcelowe byłoby zagnieżdżanie płótna wewnątrz innego płótna. Strona wyświetla tylko to, co znajduje się wewnątrz znacznika canvas, jeśli przeglądarka nie obsługuje canvas. Po prostu zrób to, co powiedział robertc:
<canvas id="background">fallbacks/polyfills go in here...</canvas> <canvas id="foreground">.. or here, but not other canvases.</canvas>