Ändra linjefärg i canvas med JavaScript
Låt oss nu lära oss att ändra färg på kontur
och fyllning. För detta finns följande egenskaper:
egenskapen strokeStyle sätter
färg på konturen, och egenskapen fillStyle
- fyllningsfärg. Färgerna sätts i vanligt
CSS
format.
Exempel
Låt oss rita en kontur med rect
och färga 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();
:
Exempel
Låt oss rita en kvadrat med rect
och färga 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();
:
Anmärkning
Viktigt: när du sätter strokeStyle
eller fillStyle kommer det nya värdet att gälla
för alla figurer som ritas
från och med nu. För varje figur som
behöver en annan färg måste du skriva över
värdet på fillStyle eller strokeStyle.
