É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.
fillRect()
Dessiner un rectangleconst 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
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 .
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
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
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^