25 votos

El elemento Canvas de HTML5: mejor para re-dibujar objetos o el uso de mapas de bits?

Mi proyecto tiene un Canvas de HTML5 en que los objetos gráficos se dibujan en repetidas ocasiones. Estos objetos cambian rápidamente. El dibujo lleva tiempo. ¿Cómo puedo hacerlo más rápido?

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

El aspecto de un objeto depende de unos 10 propiedades que tienen cada uno de los cerca de 10 valores. Eso significa que sólo hay alrededor de 100 diferentes apariencias de un objeto puede tener. Es por eso que estoy pensando sólo en el dibujo de cada aspecto de una vez y, a continuación, el almacenamiento en caché de mapa de bits para su re-uso.

Todo debe funcionar en el cliente (es decir, no puedo usar el ready-made imágenes)

  1. ¿Cuál sería la mejor manera de hacer esto con el elemento Canvas de HTML5?
  2. Es una buena idea en absoluto, o es la sobrecarga de trabajo con mapas de bits mayor que volver a dibujar los objetos en cada momento?

26voto

Loktar Puntos 17625

Cache cache cache! Echa un vistazo a este artículo por Simon Sarris, y mis propias conclusiones. Básicamente hace un lienzo en la copia de la memoria el contenido de allí y que usted puede volver a utilizarlos. Se ven grandes aumenta el rendimiento de hacer esto.

Rotación de los sprites sin almacenamiento en caché

Rotación de los sprites CON el almacenamiento en caché (caminando hacia arriba para encontrar a los zombies)

Usted debe ver una gran mejora en el 2º ejemplo.

EDITAR

jsfiddle ejemplo en caché

jsfiddle ejemplo no se almacenan en caché

Simon publicado en los comentarios, que realmente debería aclarar las cosas si usted no puede ver las ganancias de rendimiento mirando a los demos.

JSperf resultados por Simon Sarris

1voto

Federico Zancan Puntos 2480

Dependiendo de cuántos objetos podría cambiar en un segundo, y en consecuencia cómo muchos de los objetos que tienes que volver a dibujar y cómo - dentro del mismo segundo, volver a dibujar más de caché podría ser una opción.

De forma general, sugiero considerar los siguientes decisiones de la ruta.

Usted mencionó que no puede ser de 100 maneras diferentes para uno de los objetos que aparecen.

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

Son estas transiciones de estado dramático en la forma, tamaño o color, pero todavía están bien identificados, marcados y manejable? Si es así, caché de sólo una vez de 100 diferentes apariencias para ser utilizado por todos los objetos podría ser una mejora significativa del rendimiento.

Por el contrario, si - por ejemplo - el fondo apenas cambios y el dibujo de la parte que ocupa un menor parte relevante de la zona del objeto que usted podría considerar seriamente la posibilidad de volver a dibujar cada vez.

De hecho, un pre-renderizados de la imagen podría no ajustarse a sus necesidades de rendimiento si el objeto cambia de forma dinámica y, especialmente, sobre una base continua, como un pre-renderizados de imagen debe ser dibujado completamente en cada estado de la transición, mientras que volver a dibujar el objeto podría significar una menor carga computacional.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X