Tela all'interno di html5

Question

Possiamo posizionare una tela all'interno della tela esistente? Se possibile, aiutaci a farlo in html5.

Answer 1

Ci sono due modi possibili per interpretare la tua domanda. Uno è che si intende effettivamente nido canvas elementi stessi, come questo:

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

Questo è legale (secondo validator.nu), ma inutile. Il contenuto all'interno dell'elemento canvas è per il fallback. L'unico modo in cui viene utilizzato il contenuto all'interno dell'elemento canvas è se il browser non supporta canvas, nel qual caso l'elemento interno canvas non verrà comunque visualizzato.

L'altro modo di interpretare la domanda è possibile visualizzare l'immagine visualizzata su una tela all'interno di un'altra. Questo è abbastanza semplice, un elemento canvas può essere utilizzato come primo parametro su context.drawImage(). Se si dispone di due canvas elementi:

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

Poi this script (using jQuery) trarrà sul primo canvas e quindi aggiungere che quattro volte come immagine al secondo 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); 

Ma ancora una volta, perché dovresti? È possibile replicare l'immagine del secondo canvas sopra 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); 

Quindi, in sintesi: sì, è possibile, ma non è davvero necessario in uso semplice.

Answer 2

Sarebbe assolutamente inutile annidare una tela all'interno di un'altra tela. La pagina vede solo ciò che si trova all'interno del tag canvas se il browser non supporta lo canvas. Quindi, basta fare quello che robertc detto:
<canvas id="background">fallbacks/polyfills go in here...</canvas> <canvas id="foreground">.. or here, but not other canvases.</canvas>