Ändern der Linienfarbe in Canvas mit JavaScript

Lassen Sie uns nun lernen, wie man die Farbe der Kontur und der Füllung ändert. Dafür gibt es die folgenden Eigenschaften: Die Eigenschaft strokeStyle legt die Farbe der Kontur fest, und die Eigenschaft fillStyle die Füllfarbe. Die Farben werden im üblichen CSS Format angegeben.

Beispiel

Lassen Sie uns eine Kontur mit rect zeichnen und sie rot einfärben:

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

Результат:

Beispiel

Lassen Sie uns ein Quadrat mit rect zeichnen und es grün füllen:

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

Результат:

Hinweis

Wichtig: Wenn Sie strokeStyle oder fillStyle setzen, gilt der neue Wert für alle Formen, die ab diesem Zeitpunkt gezeichnet werden. Für jede Form, für die Sie eine andere Farbe benötigen, müssen Sie den Wert von fillStyle oder strokeStyle überschreiben.

Praktische Aufgaben