Une faible connaissance de beginpath () provoque une superposition de style lors de la peinture d'un dessin en toile

Écrivez cet article,C'est parce que canvas Lors du dessin,J'ai rencontré un problème：Lors du dessin,Styles graphiques définis plus loin（Couleur、Poids de ligne, etc.）Superposition du style du dessin précédent.Par la recherche,La découverte est juste canvas La méthode pertinente pour tracer le cheminbeginPath()Ce n'est pas une compréhension profonde qui,Notez ici que,J'espère que les chaussures pour enfants qui rencontrent le même problème！

On trouvera ci - après des exemples illustrant.

Adoption fillRect() Dessiner un rectangle

const canvas_a = document.getElementById('canvas_a');
const ctx_a = canvas_a.getContext('2d');
ctx_a.fillStyle = '#2DE0A5'; // Vert
ctx_a.fillRect(10, 10, 80, 40);
ctx_a.fillStyle = '#03a9f4'; // Bleu
ctx_a.fillRect(10, 60, 80, 40);
Copier le Code

Adoption rect() Dessiner un rectangle（Mauvaise écriture）

const canvas_b = document.getElementById('canvas_b');
const ctx_b = canvas_b.getContext('2d');
ctx_b.fillStyle = '#2DE0A5'; // Vert
ctx_b.rect(10, 10, 80, 40);
ctx_b.fill();
ctx_b.fillStyle = '#03a9f4'; // Bleu
ctx_b.rect(10, 60, 80, 40);
ctx_b.fill();
Copier le Code

「Découverte」： Le style que vous définissez lorsque vous dessinez le deuxième rectangle （Bleu） Style superposé au premier rectangle （Vert）

Cité ici《 Red Treasure Book 》 Les mots pertinents dans le livre expliquent ：

• Le rectangle est le seul qui Direct In 2D Formes dessinées dans le contexte du dessin . Les méthodes associées au dessin d'un rectangle sont 3 - Oui.：fillRect()、strokeRect()Et clearRect().

• Pour tracer le chemin , Vous devez d'abord appeler beginPath() Méthode pour indiquer que vous souhaitez commencer à dessiner Nouveau chemin.

• rect() Méthodes et strokeRect() Et fillRect()La différence est que, Il crée un chemin , Au lieu de graphiques séparés .

Adoption rect() Dessiner un rectangle（La bonne écriture）

const canvas_c = document.getElementById('canvas_c');
const ctx_c = canvas_c.getContext('2d');
ctx_c.beginPath(); // L'appel indique un nouveau chemin 
ctx_c.fillStyle = '#2DE0A5';
ctx_c.rect(10, 10, 80, 40);
ctx_c.fill();
ctx_c.beginPath(); // L'appel indique un nouveau chemin 
ctx_c.fillStyle = '#03a9f4';
ctx_c.rect(10, 60, 80, 40);
ctx_c.fill();
Copier le Code

Dessiner des lignes（Mauvaise écriture）

const canvas_x = document.getElementById('canvas_x');
const ctx_x = canvas_x.getContext('2d');
ctx_x.lineWidth = 15;
ctx_x.strokeStyle = '#2DE0A5';
ctx_x.moveTo(20, 20);
ctx_x.lineTo(120, 20);
ctx_x.stroke();
ctx_x.strokeStyle = '#03a9f4';
ctx_x.moveTo(20, 60);
ctx_x.lineTo(120, 60);
ctx_x.stroke();
Copier le Code

Dessiner des lignes（La bonne écriture）

const canvas_x = document.getElementById('canvas_x');
const ctx_x = canvas_x.getContext('2d');
ctx_x.lineWidth = 15;
ctx_x.beginPath(); // L'appel indique un nouveau chemin 
ctx_x.strokeStyle = '#2DE0A5';
ctx_x.moveTo(20, 20);
ctx_x.lineTo(120, 20);
ctx_x.stroke();
ctx_x.beginPath(); // L'appel indique un nouveau chemin 
ctx_x.strokeStyle = '#03a9f4';
ctx_x.moveTo(20, 60);
ctx_x.lineTo(120, 60);
ctx_x.stroke();
Copier le Code

Pour des raisons spécifiques, Voir quelqu'un dire que c'est canvas Chaque dessin redessine tout le contenu de la toile , Pour en savoir plus o(╥﹏╥)o ！ Les grands hommes que vous voyez sont les bienvenus pour dissiper les doutes ^v^