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:

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

Результат:

Voorbeeld

Laten we een vierkant tekenen met rect en het in groen kleuren:

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

Результат:

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.

Praktische opdrachten