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.

  • Cómo extraer información de orientación de image desde la image cargada en Canvas
  • Biblioteca JS HTML5 de código abierto para flowchats
  • ¿Cómo hacer charts de barras de participación de 52 semanas como lo hizo Github?
  • Imagen de canvas HTML
  • Desplazamiento horizontal en canvas. HTML5
  • Necesita cambiar el color de background del canvas mientras usa fabric js
  • Opciones de curvas de image Fabric JS html 5
  • Html 5 canvas eliminación de rectángulo y después dibujar
  • Obtener todas las coorderadas de píxeles entre 2 puntos
  • Lienzo HTML5: obtenga un evento cuando finalice el dibujo
  • HTML5 Canvas Creative Alpha-Blending
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.