javascript mdn PutImageData(...) è più performante di drawImage(...)?




putimagedata example (4)

Inoltre, putImageData non funziona quando la polizia di origine stessa viene interrotta

Credo di sì, ma avevo bisogno di dimostrarlo.

Immagino sia lo stesso caso di Flash e della sua Bitmap rispetto a BitmapData. Fondamentalmente, BitmapData è un estratto non visivo dei dati nella Bitmap, che consente manipolazioni molto facili e veloci.

Penso che per le soluzioni ad alte prestazioni, come i giochi, l'estrazione di ImageData da ogni immagine (ad esempio, ogni sprite) e la sua memorizzazione nella cache in un dizionario "assets" sia una soluzione migliore rispetto al disegnare gli sprite stessi sopra la tela e di nuovo

Qualcuno potrebbe dimostrarlo?


Non mi merito di aver messo insieme questo test, ma puoi chiaramente vedere le prestazioni dell'utilizzo di drawImage() con una tela e un'immagine, oltre alle prestazioni di putImageData() qui:

http://jsperf.com/canvas-drawimage-vs-putimagedata/3

A partire da ora, drawImage() è molto più veloce di putImageData() . L'ultima volta che ho sentito, questo non era previsto e gli sviluppatori del browser stavano cercando di migliorare il divario di prestazioni.


http://jsperf.com/ fornisce ottimi strumenti per esattamente questi tipi di confronti, dai un'occhiata, penso che sia esattamente quello di cui hai bisogno.


Per le tele più grandi ho scoperto che non ha fatto la differenza, ma ImageData non è sicuramente performante come drawImage per la copia di tele.

Ecco alcuni casi di test che ho usato: http://jsperf.com/canvas-size-test-case/3

Alla fine ho avuto alcuni problemi di prestazioni con le dimensioni generali del canvas, indipendentemente dalla dimensione dei dati che sto effettivamente copiando.





canvas