Ä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:

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

Результат:

Exempel

Låt oss rita en kvadrat med rect och färga den grön:

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

Результат:

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.

Praktiska uppgifter