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:
<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();
:
Eksempel
La oss tegne en firkant med rect
og farge den grønn:
<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();
:
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.
