javascript - rectangulo - Canvas de HTML5: ¿es mejor volver a dibujar objetos o usar bitmaps?
figuras en canvas html5 (2)
¡Caché de memoria caché! Mira este artículo de Simon Sarris y mis propios hallazgos . 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.
Giros de sprites sin almacenamiento en caché
Rotación de sprites CON almacenamiento en caché (caminar hacia arriba para encontrar a los zombies)
Debería ver una mejora bastante grande en el segundo ejemplo.
EDITAR
Ejemplo jsfiddle no almacenado en caché
Simon publicó esto en los comentarios, lo que realmente debería aclarar las cosas si no puede ver las ganancias de rendimiento simplemente mirando las demostraciones.
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.
La apariencia 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 imágenes ya hechas)
- ¿Cuál sería la mejor manera de hacer esto con HTML5 Canvas?
- ¿Es una buena idea o la sobrecarga de trabajar con bitmaps es mayor que volver a dibujar objetos cada vez?
Dependiendo de cuántos objetos podrían cambiar en un segundo y, consecuentemente, cuántos objetos tiene que volver a dibujar y cómo, en el mismo segundo, redibujar más que el almacenamiento en caché podría ser una buena opción.
Sobre una base general, sugeriría considerar el siguiente camino decisional.
Usted mencionó que puede haber 100 formas 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 aún 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 de objetos, podría considerar seriamente volver a dibujarla cada vez.
De hecho, una imagen renderizada previamente no podría satisfacer sus necesidades de rendimiento si su objeto dibujado cambia dinámicamente y especialmente de forma continua, ya que una imagen pretratada necesita dibujarse por completo en cada transición de estado, mientras que volver a dibujar el objeto podría significar menos carga computacional.