Techniques d'amélioration des performances du canevas HTML5 et techniques de didacticiel de partage d'expérience_html5

Utilisez la technologie de mise en cache pour implémenter le pré-dessin afin de réduire le dessin répété du contenu Canvs
Souvent, lorsque nous dessinons et mettons à jour sur Canvas, nous conservons toujours un contenu inchangé, pour lequel le contenu
doit être pré -mise en cache dessinée au lieu d'être actualisée à chaque fois.
Le code de tirage direct est le suivant :

Copiez le code

Le code est le suivant :

context .font="24px Arial";
context.fillStyle="blue";
context.fillText("Veuillez appuyer sur pour quitter le jeu",5,50);
requestAnimationFrame(render) ;

Utiliser la technologie de pré-dessin du cache :

Copiez le code

Le code est le suivant :

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; getContext("2d");
m_context. font="24px Arial";
m_context.fillStyle="blue"
m_context.fillText("Veuillez appuyer sur pour quitter le jeu",5 ,50);
}


Lorsque vous utilisez la technologie de dessin de cache Canvas, n'oubliez pas que la taille de l'objet Canvas mis en cache doit être inférieure à la taille réelle du Canvas. Essayez de rassembler les opérations de dessin de points droits et essayez de terminer le dessin en une seule fois. Un mauvais code est le suivant :

Copier le code Le 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); p2.y);
context.stroke();
}



Le code modifié avec des performances plus élevées est le suivant :

Copier le code

Le code est le suivant : context.beginPath(

for (var i); = 0; je < points.longueur - 1 ; je ) {

var p1 = points[i]

var p2 =
context.moveTo(p1.x, p1 .y);
context.lineTo( p2.x, p2.y);
}
context.stroke(


Éviter les changements fréquents et inutiles de l'état de dessin de Canvas . Un exemple de changement fréquent de style de dessin est le suivant :

Copier le code

Le code 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 ; 🎜>

Le code est le suivant :


// même
context.fillStyle = "rouge";

pour (var i = 0; i < 5; i ) {
context.fillRect(0, (i*2) * GAP, 400, GAP
} <🎜); >// impair
context.fillStyle = "blue";

for ( var i = 0; i < 5; i ) {

context.fillRect(0, (i*2 1) * GAP , 400, GAP); } dessiner Lors du dessin, seule la zone qui doit être mise à jour est dessinée, et les dessins répétés inutiles et les frais généraux supplémentaires doivent être évités à tout moment. Pour le rendu de scènes complexes, la technologie de rendu en couches est utilisée et le premier plan et l'arrière-plan sont dessinés séparément. Le

HTML qui définit le calque Canvas est le suivant :

Copiez le code


Le code est le suivant :

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

Évitez d'utiliser des coordonnées à virgule flottante
Lors du dessin de graphiques, la longueur et les coordonnées doivent être des nombres entiers au lieu de nombres à virgule flottante. La raison en est que Canvas prend en charge le dessin en demi-pixel et l'implémentera. l'algorithme d'interpolation basé sur les décimales. Pour obtenir l'effet anti-aliasing des images dessinées, veuillez ne pas sélectionner de valeurs à virgule flottante sauf si nécessaire.

Effacer le contenu du dessin sur Canvas :
context.clearRect(0, 0, canvas.width,canvas.height)
Mais il existe en fait un hack similaire dans Canvas La méthode d'effacement :
canvas.width = canvas.width;
peut également avoir pour effet d'effacer le contenu sur le canevas, mais elle peut ne pas être prise en charge sur certains navigateurs.