Kleurverandering van lyne in canvas op JavaScript
Laat ons nou leer hoe om die kleur van die omlyning
en vulkleur te verander. Hiervoor is die volgende eienskappe:
die eienskap strokeStyle stel
die kleur van die omlyning, en die eienskap fillStyle
- die vulkleur. Kleure word in die gewone
CSS
formaat gestel.
Voorbeeld
Laat ons 'n omlyning teken met rect
en dit rooi kleur:
<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
Laat ons 'n vierkant teken met rect
en dit groen kleur:
<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
Belangrik: wanneer jy strokeStyle
of fillStyle stel,
sal die nuwe waarde toegepas word
op alle vorms wat geteken word
vanaf hierdie oomblik. Vir elke vorm waarvoor
jy 'n ander kleur nodig het, moet jy die
waarde van fillStyle of strokeStyle oorstel.
