Lijnkleur veranderen in canvas met JavaScript
Laten we nu leren hoe we de kleur van de omtrek
en de vulling kunnen veranderen. Hiervoor zijn de volgende eigenschappen:
eigenschap strokeStyle stelt de
kleur van de omtrek in, en eigenschap fillStyle
- de vulkleur. Kleuren worden ingesteld in het gebruikelijke
CSS
formaat.
Voorbeeld
Laten we een omtrek tekenen met rect
en deze in rood kleuren:
<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();
:
Voorbeeld
Laten we een vierkant tekenen met rect
en het in groen kleuren:
<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();
:
Opmerking
Belangrijk: wanneer u strokeStyle
of fillStyle instelt,
zal de nieuwe waarde van toepassing zijn
op alle vormen die vanaf dat moment getekend worden.
Voor elke vorm waarvoor
u een andere kleur nodig heeft, moet u de
waarde van fillStyle of strokeStyle overschrijven.
