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 :

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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 :

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet 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.

Exercices pratiques