Endre linjefarge i canvas med JavaScript

La oss nå lære å endre fargen på konturen og fyllingen. For dette finnes følgende egenskaper: egenskapen strokeStyle setter fargen på konturen, og egenskapen fillStyle - fargen på fyllingen. Fargene settes i vanlig CSS format.

Eksempel

La oss tegne en kontur med rect og farge den rød:

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

Результат:

Eksempel

La oss tegne en firkant med rect og farge den grønn:

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

Результат:

Merknad

Viktig: når du setter strokeStyle eller fillStyle, vil den nye verdien gjelde for alle figurer som tegnes fra dette øyeblikket. For hver figur som trenger en annen farge, må du overskrive verdien til fillStyle eller strokeStyle.

Praktiske oppgaver