Changer la couleur des lignes dans canvas en JavaScript
Apprenons maintenant à changer la couleur du contour
et du remplissage. Pour cela, il existe les propriétés suivantes :
la propriété strokeStyle définit
la couleur du contour, et la propriété fillStyle
- la couleur de remplissage. Les couleurs sont définies au format
CSS
habituel.
Exemple
Dessinons un contour avec rect
et colorons-le en rouge :
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.rect(50, 50, 100, 100);
ctx.strokeStyle = 'red';
ctx.stroke();
:
Exemple
Dessinons un carré avec rect
et remplissons-le en vert :
<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>
let canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');
ctx.rect(50, 50, 100, 100);
ctx.fillStyle = 'green';
ctx.fill();
:
Remarque
Important : lorsque vous définissez strokeStyle
ou fillStyle, la nouvelle valeur s'appliquera
à toutes les formes qui seront dessinées
à partir de ce moment. Pour chaque forme pour laquelle
vous avez besoin d'une couleur différente, vous devez redéfinir
la valeur de fillStyle ou strokeStyle.
