Il modo migliore per stratificare in HTML5 Canvas?

Question

Se hai bisogno di lavorare su diversi livelli su tela HTML5 qual è il modo migliore per farlo? Vedo che alcune persone decidono di impilare un certo numero di tele una sull'altra usando la posizione: assoluta. È questo il modo migliore?

Answer 1

Personalmente, non impilavo le tele l'una sull'altra. Una tela è in realtà solo una bitmap che mostra tutti i pixel di cui hai bisogno, quindi dovresti averne solo uno nella maggior parte dei casi.

Suggerisco di utilizzare una libreria per aiutarti a gestire diversi oggetti. Ho trovato che Grant Skinner's EaselJS è un gioco da ragazzi con cui lavorare.

Questa libreria consente di raggruppare facilmente gli oggetti e aggiungerli alla tela, inoltre rende banale l'aggiunta di listener del mouse per acquisire i clic sugli oggetti, ecc. Che è qualcosa che si dovrebbe scrivere molto codice da fare quando si utilizza tela senza una biblioteca.

C'è anche la documentazione e gli esempi su EaselJS.

EDIT:

Ecco un estratto dalla documentazione in materia di container utilizzato per oggetti di gruppo.

Un contenitore è un elenco di visualizzazione annidabile che consente di lavorare con elementi di visualizzazione composti. Ad esempio, è possibile raggruppare insieme bitmap di braccio, gamba, busto e testa in un contenitore di persone e trasformarli come gruppo, pur rimanendo in grado di spostare le singole parti l'una rispetto all'altra. I figli dei contenitori hanno le loro proprietà di trasformazione e alfa concatenate con il contenitore principale. Ad esempio, una forma con x = 100 e alpha = 0.5, posizionata in un contenitore con x = 50 e alpha = 0.7 verrà renderizzata nell'area di disegno su x = 150 e alfa = 0,35. I contenitori hanno un sovraccarico, quindi in genere non si dovrebbe creare un contenitore per contenere un singolo figlio.