Cambiare il colore della linea in canvas con JavaScript

Ora impariamo a cambiare il colore del tratto e del riempimento. Per questo, ci sono le seguenti proprietà: la proprietà strokeStyle imposta il colore del tratto, mentre la proprietà fillStyle - il colore del riempimento. I colori vengono impostati nel normale formato CSS.

Esempio

Disegniamo un contorno usando rect e coloriamolo di rosso:

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();

Результат:

Esempio

Disegniamo un quadratino usando rect e coloriamolo di verde:

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();

Результат:

Nota

Importante: quando si imposta strokeStyle o fillStyle, il nuovo valore si applicherà a tutte le forme che verranno disegnate da quel momento in poi. Per ogni forma per cui è necessario un colore diverso, è necessario reimpostare il valore di fillStyle o strokeStyle.

Compiti pratici