¿Es mejor tener un lienzo grande o hasta 100 lienzos pequeños generados dinámicamente?

Estoy trabajando en un simulador de dados web móvil. El prototipo inicial está aquí: http://dicewalla.com ¿Es mejor tener un lienzo grande o hasta 100 lienzos pequeños generados dinámicamente?

Actualmente tengo un lienzo grande donde dibujo todos los dados. Estoy planeando volver a escribir el código de manera que sea más MVC y más fácil de actualizar. Creo que sería más fácil para mí generar un pequeño lienzo para cada objeto dado que dibujar todos los dados en el lienzo grande y seguir actualizando ese gran lienzo.

Mi pregunta es si hay un mal rendimiento al hacer que el navegador cree muchos lienzos pequeños frente a uno grande. Es difícil probarlo localmente, esperaba que alguien aquí supiera cuál es la mejor práctica.

Fuente

2012-08-09 Ben Brophy

¿está utilizando setInterval para controlar la animación en su nueva compilación? Tengo la misma pregunta. Aunque, en mi caso, tengo una animación constante que está siendo controlada por setInterval. Tener varios setIntervals en una página sería mucho menos deseable que tener toda la animación en un lienzo, por lo que el enfoque de lienzo único parece ser un enfoque más eficiente. – Joel

Yo diría que use 6 objetos de lona para dibujar los lados y luego úselos como imágenes de fondo para los dados enrollados. Hay una gran cantidad de lienzos ya que no está modificando los gráficos después. Diablos, puedes hacer esto incluso sin lienzo por completo, solo para gradientes radiales y divs con estilo. –

Seguimiento - Intenté ambos enfoques. Si bien no tengo medidas exactas, el uso de múltiples lienzos preformados notablemente mejor. No estoy usando animaciones, solo redibujo lienzos cuando se hace clic en un botón. –

Los lienzos múltiples generalmente permiten un mejor rendimiento, ya que puede rehacer de forma selectiva.

Si solo tiene un lienzo y desea actualizar un dado, normalmente tendrá que volver a dibujar todo el lienzo. Por otro lado, los lienzos múltiples le permiten actualizar solo los dados que deben volver a dibujarse. Eso es un aumento en la eficiencia.

Además, no se debe ver ninguna diferencia notable en la carga de la lona 1 contra 100.

Fuente

2012-08-09 13:36:24

Eso es una gran ayuda, gracias. Voy a actualizar solo los dados seleccionados a veces. –

En términos de rendimiento, como se mencionó anteriormente, no debe haber poca diferencia entre 1-100 elementos canvas si' no actualiza los gráficos de forma regular. (es decir: gráficos estáticos/sin animación)

La mayoría de las referencias en la red con respecto a los lienzos múltiples tienden a tratar casos en los que tiene múltiples capas y necesita manejar el dibujo sobre otras cosas con transparencia.

Habiendo dicho eso, lo que estás haciendo con dicewalla no parece que gane nada por tener múltiples lienzos.

También puede volver a dibujar selectivamente las regiones de un lienzo individual para obtener un mejor rendimiento si la actualización de todo el lienzo es un cuello de botella. Esto le brinda los beneficios de rendimiento de tener múltiples lienzos sin tener que lidiar con la administración y la creación de esos elementos.

Fuente

2012-08-09 14:22:41 joekarl

Gracias. Las actualizaciones solo se realizarán cuando un usuario realice una acción (por ejemplo, selecciona algunos de los dados para volver a lanzarlos, sin tocar a los demás). En función de su respuesta y de @depot 's, parece que no importa demasiado, como lo hago. Me resulta más fácil agregar los eventos táctiles a los lienzos individuales que averiguar qué dados se tocaron usando las coordenadas xey en un lienzo grande, por lo que me inclino por los lienzos múltiples. –

¿Es mejor tener un lienzo grande o hasta 100 lienzos pequeños generados dinámicamente?

Respuesta

Cuestiones relacionadas