Ä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:
<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();
:
Beispiel
Lassen Sie uns ein Quadrat mit rect zeichnen
und es grün füllen:
<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();
:
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.
