HTML5 Canvas: migliore per ri-disegnare oggetti o usare bitmap?

Question

Il mio progetto ha una tela HTML5 su cui gli oggetti grafici sono disegnati ripetutamente. Questi oggetti cambiano rapidamente. Disegnarli richiede tempo. Come posso renderlo più veloce?

Gli oggetti non sono eccessivamente complessi ma contengono oggetti come archi, gradienti, poligoni.

L'aspetto di un oggetto dipende da circa 10 proprietà, ognuna con uno di circa 10 valori. Ciò significa che ci sono solo circa 100 diverse apparizioni rispetto a quelle che un oggetto può avere. Ecco perché sto pensando solo a disegnare ogni aspetto una volta e poi a mettere in cache una bitmap per il riutilizzo.

Tutto deve lavorare sul client (vale a dire che non può usare immagini ready-made)

1. Quale sarebbe il modo migliore per fare questo con HTML5 Canvas?
2. È una buona idea o il sovraccarico di lavorare con le immagini bitmap è maggiore del ridisegno degli oggetti ogni volta?

Answer 1

cache cache cache! Controlla this article by Simon Sarris e my own findings. Fondamentalmente fai una tela in memoria copia i contenuti lì e puoi riutilizzarli. Vedrai enormi aumenti di prestazioni facendo questo.

Rotating sprites without caching

Rotating sprites WITH caching (a piedi verso l'alto per trovare gli zombie)

si dovrebbe vedere una bella grande miglioramento nel 2 ° esempio.

EDIT

jsfiddle example cached

jsfiddle example not cached

Simon postato nei commenti, che se le cose veramente chiaro SU Se non è possibile vedere l'incremento delle prestazioni da solo guardando le demo.

JSperf findings by Simon Sarris

Answer 2

seconda del numero di oggetti potrebbe cambiare in un secondo, e di conseguenza il numero di oggetti è necessario ridisegnare e come - all'interno dello stesso secondo, ridisegnando più di caching potrebbe essere piuttosto un opzione.

In generale, suggerirei di prendere in considerazione il seguente percorso decisionale.

Hai detto che ci possono essere 100 diversi modi per far apparire uno dei tuoi oggetti.

Questo può essere considerato simile a un minimo di 99^2 transizioni di stato teoricamente possibili per ciascuno dei vostri oggetti.

Queste transizioni di stato sono drammatiche per forma/dimensione/colore, ma sono ancora ben identificate, contrassegnate e gestibili? In tal caso, la memorizzazione nella cache di una sola volta di 100 aspetti diversi da tutti gli oggetti potrebbe rappresentare un miglioramento significativo delle prestazioni.

Al contrario, se - per esempio - lo sfondo cambia appena e la parte disegnata occupa una parte meno rilevante dell'area dell'oggetto, si potrebbe seriamente considerare di ridisegnarla ogni volta.

Infatti un'immagine pre-renderizzata non soddisfa le tue esigenze di prestazione se l'oggetto disegnato cambia in modo dinamico e soprattutto su base continua, poiché un'immagine pre-renderizzata deve essere disegnata completamente in ogni transizione di stato mentre si ridisegna il oggetto potrebbe significare meno carico di calcolo.