Canvas de HTML5: ¿es mejor volver a dibujar objects o usar bitmaps?

Mi proyecto tiene un canvas HTML5 en el que se dibujan objects charts repetidamente. Estos objects cambian rápidamente. Dibujarlos lleva time. ¿Cómo puedo hacerlo más rápido?

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

La apariencia de un object depende de aproximadamente 10 properties, cada una de las cuales tiene uno de aproximadamente 10 valores. Eso significa que solo hay alnetworkingedor de 100 apariencias diferentes de las que un object puede tener. Es por eso que estoy pensando solo en dibujar cada aparición una vez y luego almacenar en caching un bitmap para su reutilización.

Todo debe funcionar en el cliente (es decir, no puedo usar 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 objects cada vez?

2 Solutions collect form web for “Canvas de HTML5: ¿es mejor volver a dibujar objects o usar bitmaps?”

¡Caché de memory caching! Mira este artículo de Simon Sarris y mis propios hallazgos . Básicamente, usted hace un canvas en la memory y copy los contenidos allí y puede reutilizarlos. Verá un gran aumento de performance haciendo esto.

Giros de sprites sin almacenamiento en caching

Rotación de sprites CON almacenamiento en caching (caminar hacia arriba para encontrar a los zombies)

Debería ver una mejora bastante grande en el segundo ejemplo.

EDITAR

jsfiddle example cached

Ejemplo jsfiddle no almacenado en caching

Simon publicó esto en los comentarios, lo que realmente debería aclarar las cosas si no puede ver las ganancias de performance simplemente mirando las demostraciones.

Los hallazgos de JSperf por Simon Sarris

Dependiendo de cuántos objects podrían cambiar en un segundo y, consecuentemente, cuántos objects tiene que volver a dibujar y cómo, en el mismo segundo, networkingibujar más que el almacenamiento en caching podría ser una buena opción.

Sobre una base general, sugeriría considerar el siguiente path decisional.

Usted mencionó que puede haber 100 forms diferentes para que aparezca uno de sus objects.

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

¿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 caching solo una vez 100 apariencias diferentes para ser utilizado por todos sus objects podría representar una mejora significativa en el performance.

Por el contrario, si, por ejemplo, el background apenas cambia y la parte dibujada ocupa una parte less relevante del área de objects, podría considerar seriamente volver a dibujarla cada vez.

De hecho, una image renderizada previamente no podría ajustarse a sus necesidades de performance si su object dibujado cambia dinámicamente y especialmente de forma continua, ya que una image pretratada debe dibujarse por completo en cada transición de estado, mientras que volver a dibujar el object podría significar less carga computacional.

  • Canvas de HTML5: ¿cómo dibujar una línea sobre un background de image?
  • Cómo dibujar Font Awesome Icons en html canvas
  • Arrastrar y soltar la ruta HTML5 en el canvas sin la biblioteca JS
  • Renderice .pdf a Canvas individual usando pdf.js y ImageData
  • Cree una herramienta de lápiz realist para una aplicación de pintura con HTML5 Canvas
  • ¿Es posible dibujar un canvas que sea más grande que la pantalla actual?
  • Convertir canvas en una image con JavaScript
  • Agregar el button Eliminar personalizado (Atrás, al frente) a los controles
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.