Compartir experiencia en habilidades de mejora del rendimiento del lienzo HTML5

Comentario: Este artículo explica cómo usar la tecnología de caché para implementar el dibujo previo, reducir el dibujo repetido del contenido de lona y evitar usar coordenadas de puntos flotantes para mejorar el rendimiento del lienzo HTML5. Los amigos interesados ​​pueden referirse a él, esperando que sea útil para todos.

Muchas veces, dibujamos y actualizamos sobre el lienzo, y siempre mantenemos un contenido sin cambios para estos contenidos.

El caché debe ser previamente dibujado, no todas las actualizaciones.

El código se dibuja directamente de la siguiente manera:

context.font = "24px arial";

context.fillstyle = "azul";

context.fillText ("Presione <c> para salir del juego", 5,50);

requestAnimationFrame (render);

Uso de técnicas de pre-pintación de caché:

function render (context) {

context.DrawImage (mtext_canvas, 0, 0);

requestAnimationFrame (render);

}

function drawText (context) {

mtext_canvas = document.createElement ("Canvas");

mtext_canvas.width = 450;

mtext_canvas.height = 54;

var m_context = mtext_canvas.getContext ("2d");

m_context.font = "24px arial";

m_context.fillstyle = "azul";

m_context.fillText ("Por favor presione <Sc> para salir del juego", 5,50);

}

Cuando use la tecnología de dibujo de caché de lienzo, recuerde almacenar en caché el tamaño del objeto de lienzo menos que el tamaño real del lienzo. Trate de juntar las operaciones de dibujar líneas rectas e intente dibujarlas de inmediato. Un código malo es el siguiente:

para (var i = 0; i <puntos.length - 1; i ++) {

var p1 = puntos [i];

var p2 = puntos [i+1];

context.beginPath ();

context.moveto (p1.x, p1.y);

context.lineto (p2.x, p2.y);

context.stroke ();

}

El código con mayor rendimiento después de la modificación es el siguiente:

context.beginPath ();

para (var i = 0; i <puntos.length - 1; i ++) {

var p1 = puntos [i];

var p2 = puntos [i+1];

context.moveto (p1.x, p1.y);

context.lineto (p2.x, p2.y);

}

context.stroke ();

Evite el cambio frecuente de estados de dibujo de lienzo innecesarios. Un ejemplo de estilo de dibujo con frecuencia es el siguiente:

VAR GAP = 10;

para (var i = 0; i <10; i ++) {

context.fillstyle = (i % 2? "Azul": "rojo");

context.fillrect (0, i * gap, 400, gap);

}

Evite el cambio frecuente de los estados de dibujo, y el mejor código de dibujo de rendimiento es el siguiente:

// incluso

context.fillstyle = "rojo";

para (var i = 0; i <5; i ++) {

context.fillrect (0, (i * 2) * Gap, 400, gap);

}

// extraño

context.fillstyle = "azul";

para (var i = 0; i <5; i ++) {

context.fillrect (0, (i * 2+1) * Gap, 400, gap);

}

Al dibujar, solo dibuje las áreas que necesitan actualizarse y evite el dibujo duplicado innecesario y la sobrecarga adicional en cualquier momento. Para el dibujo complejo de escenas, se utiliza la tecnología de dibujo jerárquico, que se divide en primer plano y dibujo de fondo. Defina la capa de lienzo

El HTML es el siguiente:

<Canvas>

</able>

<Canvas>

<span> </lienvas>

</span>

Si no es necesario, trate de evitar efectos de dibujo como sombras, borrones, etc.

Evite usar coordenadas de puntos flotantes

Al dibujar un gráfico, se deben seleccionar enteros en lugar de números de punto flotante. La razón es que el lienzo admite el dibujo de medio píxeles para implementar un algoritmo de interpolación basado en lugares decimales para lograr el efecto antialiasing de las imágenes de dibujo. Si no es necesario, no seleccione los valores de punto flotante.

Borre el contenido de dibujo en el lienzo:

context.ClearRect (0, 0, Canvas.Width, Canvas.Height)

Pero, de hecho, también hay un método de piratería en el lienzo:

Canvas.Width = Canvas.Width;

También puede lograr el efecto de limpiar el contenido en el lienzo, pero puede no ser compatible con algunos navegadores.