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:
<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();
:
Esempio
Disegniamo un quadratino usando rect
e coloriamolo di verde:
<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();
:
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.
