Si usamos múltiples <canvas> en una sola página html, ¿obstaculiza el rendimiento de la aplicación que se está desarrollando y el código se vuelve muy voluminoso y requiere más tiempo para cargar la página?HTML5 canvas múltiple en una sola página
A veces lienzos múltiples resulta en un mejor rendimiento. Lo mejor es probar si puede permitirse el tiempo.
Supongamos que está realizando un programa que tiene elementos en la pantalla y le permite al usuario dibujar un cuadro de selección.
Con un lienzo, para dibujar el cuadro de selección, debe volver a dibujar todos los elementos una y otra vez para actualizar el cuadro de selección que el usuario ve, ya que todos están en el mismo lienzo.
O bien, puede tener dos lienzos, uno con los objetos y luego otro delante para cosas como "herramientas" (como los gráficos del cuadro de selección). Aquí dos lienzos pueden ser más eficientes.
Otras veces es posible que desee tener un fondo que cambia muy raramente y objetos en primer plano que cambian todo el tiempo. En lugar de volver a dibujar todos a 60 fotogramas por segundo, crea un lienzo de fondo y un lienzo en primer plano, y solo los objetos del primer plano se vuelven a dibujar a gran velocidad. Aquí dos lienzos deberían ser más eficientes que uno, pero puede ser más óptimo "cachear" ese lienzo de fondo como una imagen y dibujar primero la imagen de cada cuadro.
He usado docenas de lienzos en la misma página que muestran diferentes gráficos utilizando una biblioteca de gráficos de JavaScript. Los gráficos son bastante rápidos, es recopilar la información para ellos que es un poco lenta en nuestro caso.
Si lo desea, puede esperar a hacer todo el sorteo hasta que el resto de la página se carga al iniciarlo desde la función onLoad.
dijiste: usando una biblioteca gráfica de JavaScript. ¿Puedes decirme el nombre de esto? – menardmam
Hemos estado usando http://www.rgraph.net/ –
Una sola instancia se ejecuta sin problemas, más no afecta la representación en la página. Los datos son el factor de desaceleración del lienzo. Para aumentar el tiempo de carga, simplemente llame a los métodos de representación de lienzo después de cargar la página.
De acuerdo con Mark Pilgrim, es una buena idea usar múltiples lienzos.
Ver http://diveintohtml5.ep.io/canvas.html#divingin
El uso de varios lienzos pueden simplificar las cosas en su final, mediante el aislamiento de las regiones de la pantalla para actualizar y aislar los eventos de entrada. Si su página es muy adecuada para dividir regiones de la pantalla, yo digo que vaya por ella.
No puedo ver esta cita concreta actualmente en este artículo, y Great WayBack Machine no lo ha archivado :(. ¿Se eliminó de allí con el tiempo? ¿Por qué? –
@ shaman.sir Está disponible aquí: http: // web.archive.org/web/20120106035725/http://diveintohtml5.ep.io/canvas.html –
Es un buen tutorial, pero no puedo encontrar ningún contenido relacionado con varios lienzos. –
Además, HTML5Rocks says es el mejor enfoque.
a menudo? Entonces, ¿bajo qué circunstancias los lienzos múltiples tienen un peor rendimiento? –
En lienzos extremadamente grandes, puede ser mejor simplemente volver a dibujar escenas simples de fondo y en primer plano (o guardarlas en imágenes) que tener 3 o más lienzos grandes. –