Ændring af linjefarve i canvas med JavaScript
Lad os nu lære at ændre farven på konturen
og fylden. Til dette er der følgende egenskaber:
egenskaben strokeStyle indstiller
farven på konturen, og egenskaben fillStyle
- farven på fylden. Farver indstilles i det sædvanlige
CSS
format.
Eksempel
Lad os tegne en kontur med rect
og farve 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
Lad os tegne en firkant med rect
og farve den grøn:
<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();
:
Bemærkning
Vigtigt: når du indstiller strokeStyle
eller fillStyle, vil den nye værdi blive anvendt
for alle figurer, der tegnes
fra dette øjeblik. For hver figur, hvor
du har brug for en anden farve, skal du overskrive
værdien af fillStyle eller strokeStyle.
