Conseils pour améliorer les performances de HTML5 Canvas

1 : Utiliser la technologie de mise en cache pour implémenter le pré-dessin et réduire le dessin répété du contenu Canvs

Souvent, lorsque nous dessinons et mettons à jour sur Canvas, nous en gardons toujours certains inchangés Contenu, pour lequel

doit être pré-dessiné dans le cache plutôt que actualisé à chaque fois.

Le code de dessin direct est le suivant :

context.font="24px Arial";
context.fillStyle="blue";
context.fillText("Please press <Esc> to exit game",5,50);
requestAnimationFrame(render);

Utiliser la technologie de pré-dessin du cache :

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="blue";
	m_context.fillText("Please press <Esc> to exit game",5,50);
}

Lorsque vous utilisez la technologie de dessin de cache Canvas, n'oubliez pas de mettre en cache une taille d'objet Canvas inférieure à la taille réelle de la Toile

. Essayez de regrouper les opérations de dessin de points droits et essayez de terminer le dessin en une seule fois. Un mauvais code est le suivant :

for (var i = 0; i < points.length - 1; i++) {
	  var p1 = points[i];
	  var p2 = points[i+1];
	  context.beginPath();
	  context.moveTo(p1.x, p1.y);
	  context.lineTo(p2.x, p2.y);
	  context.stroke();
}

Après. modification, les performances seront plus élevées Le code est le suivant :

context.beginPath();
for (var i = 0; i < points.length - 1; i++) {
  var p1 = points[i];
  var p2 = points[i+1];
  context.moveTo(p1.x, p1.y);
  context.lineTo(p2.x, p2.y);
}
context.stroke();

Éviter les inutiles CanevasL'état du dessin change fréquemment. Un exemple de changement fréquent de style de dessin est le suivant :

var GAP = 10;
for(var i=0; i<10; i++) {
	context.fillStyle = (i % 2 ? "blue" : "red");
	context.fillRect(0, i * GAP, 400, GAP);
}

évite les changements fréquents d'état de dessin et améliore les performances. Un bon code de dessin est le suivant :

// even
context.fillStyle = "red";
for (var i = 0; i < 5; i++) {
context.fillRect(0, (i*2) * GAP, 400, GAP);
}
			
// odd
context.fillStyle = "blue";
for (var i = 0; i < 5; i++) {
context.fillRect(0, (i*2+1) * GAP, 400, GAP);
}

Lorsque vous dessinez, dessinez uniquement la zone qui doit être mise à jour et évitez les inutiles. dessin répété et frais généraux supplémentaires à tout moment.

Utilisez la technologie de dessin en couches pour dessiner des scènes complexes, divisées en premier plan et arrière-plan. Le HTML qui définit le calque Canvas est le suivant :

Si cela n'est pas nécessaire, essayez d'éviter d'utiliser des effets de dessin tels que les ombres, le flou, etc.

<canvas id="bg" width="640" height="480" style="position: absolute; z-index: 0">
</canvas>
<canvas id="fg" width="640" height="480" style="position: absolute; z-index: 1"></canvas>

Évitez d'utiliser des coordonnées à virgule flottante.

Lors du dessin de graphiques, la longueur et les coordonnées doivent être sélectionnées sous forme d'entiers au lieu de nombres à virgule flottante, car Canvas prend en charge le dessin en demi-pixel

L'algorithme d'interpolation sera implémenté en fonction des décimales pour obtenir l'effet anti-aliasing de l'image dessinée. Veuillez ne pas sélectionner une valeur à virgule flottante si cela n'est pas nécessaire.

Effacer le contenu du dessin sur la toile :

context.clearRect(0, 0, canvas.width,canvas.height)

Mais en fait, il existe une méthode similaire dans Canvas

hack méthode de compensation : canvas.width = canvas.width;

également L'effet d'effacement du contenu sur le

canevas peut être obtenu, mais il peut ne pas être pris en charge sur certains navigateurs.

Ce qui précède est le contenu des techniques permettant d'améliorer les performances de HTML5 Canvas. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (. www.php.cn) !