Dessiner des lignes via canvas en JavaScript
Commençons simplement - par le dessin de lignes. Pour comprendre comment cela fonctionne, imaginez que vous avez une feuille de papier et un crayon. Vous pouvez dessiner sur cette feuille, ou simplement déplacer le crayon vers un point souhaité sans dessiner.
JavaScript fonctionne de la même manière : il a un
crayon (ou un stylo pour dessiner), vous pouvez le déplacer à l'endroit
souhaité en utilisant la méthode
moveTo, et dessiner - en utilisant la méthode
lineTo.
Les deux méthodes prennent comme paramètres le point vers
lequel déplacer la pointe du stylo - le premier paramètre
est la coordonnée horizontale, et le second - la coordonnée verticale.
L'origine des coordonnées - le point 0,
0 - est le coin supérieur gauche de l'élément.
Lorsque le stylo est déplacé vers le point souhaité -
la méthode moveTo se contente de le déplacer, tandis que
lineTo, lors du déplacement, dessine une
ligne de la position actuelle du stylo jusqu'au point
vers lequel il se déplace.
Cependant, si vous exécutez le code ci-dessus
- rien ne se passera : il est nécessaire d'écrire
deux commandes supplémentaires : la première commande beginPath
doit être indiquée avant de commencer à dessiner la
ligne, et la seconde commande stroke doit
être appelée après toutes les combinaisons de moveTo
et lineTo pour que la ligne soit dessinée.
Ainsi, écrivons un code fonctionnel pour dessiner une ligne :
Dessinons une ligne
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.stroke();
:
Dessinons un V
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.stroke();
:
Dessinons un triangle
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
ctx.lineTo(50, 50);
ctx.stroke();
:
Dessinons un carré
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(150, 50);
ctx.lineTo(150, 150);
ctx.lineTo(50, 150);
ctx.closePath();
ctx.stroke();
:
Fermeture des formes
Pour dessiner une forme fermée, il n'est pas obligatoire
de tracer toutes les lignes - la dernière ligne peut
être tracée automatiquement et fermer la forme.
Pour cela, avant la méthode stroke, il faut
appeler la méthode closePath.
Cette méthode tente de fermer la forme en dessinant une ligne droite du point final au point initial. Si la forme était déjà fermée ou n'est qu'un simple point, alors la méthode ne fait rien.
Dessinons un triangle en utilisant closePath :
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
//ctx.lineTo(50, 50); - cette étape est omise
ctx.closePath();
ctx.stroke();
:
Remplissage des formes
Au lieu de la méthode stroke, on peut utiliser
la méthode fill - dans ce cas, la forme n'a pas besoin
d'être entièrement fermée - elle se remplira
quand même :
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 50);
ctx.lineTo(100, 100);
ctx.lineTo(150, 50);
//ctx.lineTo(50, 50); - cette étape est omise
//ctx.closePath(); - et celle-ci aussi
ctx.fill();
:
