javascript - Cento contesti rispetto a un contesto in HTML5 Canvas?



performance html5-canvas (1)

Sto creando un semplice motore fisico che funziona con l'API Canvas. Qual è la migliore pratica in termini di prestazioni? È per creare un contesto separato per sempre oggetto nella tela (ad esempio per ogni palla, scatola, ecc.) O per utilizzare un solo contesto? Quest'ultimo comporta la definizione del percorso sul contesto per ogni oggetto da ridisegnare, oltre all'impostazione del colore ecc.

È una cattiva idea utilizzare più contesti quando il numero di oggetti si avvicina a cento?

Il motivo per cui lo chiedo, è perché non voglio ottenere una sorpresa un centinaio di ore lavorative più tardi perché sono andato con il modo sbagliato di farlo.

https://src-bin.com


Answer #1

I guadagni in termini di prestazioni con più tele provengono dal sapere perché utilizzi più tele.

Non utilizzare più tele a meno che non servano a uno scopo utile:

  • Le tele sono elementi modestamente costosi.
  • Sui dispositivi mobili, le tele sono ancora piuttosto lente: più tele sono più lente.

Ecco alcuni motivi per utilizzare più di 1 tela:

Hai disegni che si animano in momenti diversi.

Ad esempio, uno sfondo potrebbe animare ogni 5 fotogrammi mentre i tuoi oggetti più attivi potrebbero animare ogni fotogramma. Avere lo sfondo su una seconda tela significa che non è necessario disegnare lo sfondo di ogni fotogramma dell'animazione.

Si desidera "doppio buffer" per aumentare la velocità di visualizzazione.

Ad esempio, mentre viene visualizzato il frame corrente, è possibile utilizzare un secondo canvas per assemblare un elemento complesso e quindi utilizzare displayContext.drawImage (bufferCanvas, 0,0) per disegnare la tela del buffer nell'area di disegno. Ciò consente di utilizzare il "tempo di inattività" tra i fotogrammi dell'animazione per preparare il fotogramma successivo.

Si utilizza la tela per apportare variazioni su una singola immagine / drawnElement (template).

Ad esempio, se hai bisogno di una barriera fisica (ad esempio un'immagine di un edificio grigio). Potresti desiderare edifici rossi, blu e verdi per varietà. Si potrebbe avere l'immagine di edificio grigia su una tela fuori schermo e usare globalCompositeOperation del contesto per ricolorare quell'edificio in variazioni rosse, blu e verdi. Ciò ti consente di riutilizzare 1 risorsa immagine in diversi modi.

Ci sono altri motivi per più tele, ma il punto è usare più tele per soddisfare un bisogno.





html5-canvas