Canvas HTML5: ¿es mejor volver a dibujar objetos o usar mapas de bits?

Question

Mi proyecto tiene un lienzo HTML5 en el que se dibujan objetos gráficos repetidamente. Estos objetos cambian rápidamente. Dibujarlos lleva tiempo. ¿Cómo puedo hacerlo más rápido?

Los objetos no son demasiado complejos pero contienen cosas como arcos, degradados, polígonos.

El aspecto de un objeto depende de aproximadamente 10 propiedades, cada una de las cuales tiene uno de aproximadamente 10 valores. Eso significa que solo hay alrededor de 100 apariencias diferentes de las que un objeto puede tener. Es por eso que estoy pensando solo en dibujar cada aparición una vez y luego almacenar en caché un mapa de bits para su reutilización.

Todo debe funcionar en el cliente (es decir, no puedo usar las imágenes ya hechas)

1. ¿Cuál sería la mejor manera de hacer esto con HTML5 Canvas?
2. ¿Es una buena idea o la sobrecarga de trabajar con bitmaps es mayor que volver a dibujar objetos cada vez?

Answer 1

Caché caché caché! Consulte this article by Simon Sarris y my own findings. Básicamente, usted hace un lienzo en la memoria y copia los contenidos allí y puede reutilizarlos. Verá un gran aumento de rendimiento haciendo esto.

Rotating sprites without caching

Rotating sprites WITH caching (caminar hacia arriba para encontrar los zombies)

debería ver una mejora muy grande en el segundo ejemplo.

EDITAR

jsfiddle example cached

jsfiddle example not cached

Simon ha publicado esto en los comentarios, que deben aclarar las cosas realmente si no pueden ver las mejoras de rendimiento con sólo mirar las demostraciones.

JSperf findings by Simon Sarris

Answer 2

Dependiendo del número de objetos podría cambiar en un segundo, y en consecuencia la cantidad de objetos que tiene que volver a dibujar y cómo - en el mismo segundo, volver a dibujar más de almacenamiento en caché podría ser bastante una opción.

De manera general, sugeriría considerar el siguiente camino decisional.

Mencionó que puede haber 100 maneras diferentes para que aparezca uno de sus objetos.

Esto podría considerarse similar a un mínimo de 99^2 transiciones de estado teóricamente posibles para cada uno de sus objetos.

¿Son estas transiciones de estado dramáticas en forma/tamaño/color, pero todavía están bien identificadas, marcadas y manejables? Si es así, almacenar en caché solo una vez 100 apariencias diferentes para ser utilizado por todos sus objetos podría representar una mejora significativa en el rendimiento.

Por el contrario, si, por ejemplo, el fondo apenas cambia y la parte dibujada ocupa una parte menos relevante del área del objeto, podría considerar seriamente volver a dibujarlo cada vez.

De hecho, una imagen renderizada previamente no podría satisfacer sus necesidades de rendimiento si el objeto dibujado cambia dinámicamente y especialmente de forma continua, ya que una imagen renderizada previamente debe dibujarse por completo en cada transición de estado mientras se vuelve a dibujar objeto podría significar menos carga computacional.