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 :
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 :
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 :
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 codevar 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 codecontext.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";
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.