CanvasRenderingContext2D: fillStyle-Eigenschaft

Wert

Einer der folgenden:

• Ein String wird als CSS <color>-Wert geparst.
• Ein CanvasGradient-Objekt (ein linearer oder radialer Farbverlauf).
• Ein CanvasPattern-Objekt (ein wiederholtes Bild).

Beispiele

Ändern der Füllfarbe einer Form

Dieses Beispiel wendet eine blaue Füllfarbe auf ein Rechteck an.

HTML

<canvas id="canvas"></canvas>

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.fillStyle = "blue";
ctx.fillRect(10, 10, 100, 100);

Ergebnis

Erstellen mehrerer Füllfarben mit Schleifen

In diesem Beispiel verwenden wir zwei for-Schleifen, um ein Raster von Rechtecken zu zeichnen, die jeweils eine andere Füllfarbe haben. Um dies zu erreichen, verwenden wir die beiden Variablen i und j, um eine einzigartige RGB-Farbe für jedes Quadrat zu erzeugen, und modifizieren nur die roten und grünen Werte. (Der blaue Kanal hat einen festen Wert.) Indem Sie die Kanäle modifizieren, können Sie alle Arten von Paletten erzeugen.

<canvas id="canvas" width="150" height="150"></canvas>

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

for (let i = 0; i < 6; i++) {
  for (let j = 0; j < 6; j++) {
    ctx.fillStyle = `rgb(
        ${Math.floor(255 - 42.5 * i)}
        ${Math.floor(255 - 42.5 * j)}
        0)`;
    ctx.fillRect(j * 25, i * 25, 25, 25);
  }
}

Das Ergebnis sieht so aus:

Spezifikationen

Browser-Kompatibilität

WebKit-/Blink-spezifische Anmerkung

In WebKit- und Blink-basierten Browsern wird zusätzlich zu dieser Eigenschaft die nicht standardisierte und veraltete Methode ctx.setFillColor() implementiert.

setFillColor(color, /* (optional) */ alpha);
setFillColor(grayLevel, /* (optional) */ alpha);
setFillColor(r, g, b, a);
setFillColor(c, m, y, k, a);

Siehe auch

• Canvas API
• Die Schnittstelle, die diese Eigenschaft definiert: CanvasRenderingContext2D
• Werte, die von dieser Eigenschaft verwendet werden:
  • <color> CSS-Datentyp
  • CanvasGradient-Objekt
  • CanvasPattern-Objekt