CanvasRenderingContext2D: fillStyle-Eigenschaft

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Die CanvasRenderingContext2D.fillStyle-Eigenschaft der Canvas 2D API bestimmt die Farbe, den Verlauf oder das Muster, das innerhalb von Formen verwendet werden soll. Der Standardstil ist #000 (schwarz).

Hinweis: Weitere Beispiele für Fill- und Stroke-Stile finden Sie unter Anwenden von Stilen und Farben im Canvas-Tutorial.

Wert

Einer der folgenden:

  • Ein String, der als CSS <color>-Wert geparst wird.
  • Ein CanvasGradient-Objekt (ein linearer oder radialer Verlauf).
  • Ein CanvasPattern-Objekt (ein sich wiederholendes Bild).

Beispiele

Ändern der Füllfarbe einer Form

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

HTML

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

JavaScript

js
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 unterschiedliche Füllfarbe haben. Um dies zu erreichen, verwenden wir die zwei Variablen i und j, um eine eindeutige RGB-Farbe für jedes Quadrat zu generieren und ändern dabei nur die roten und grünen Werte. (Der Blaukanal hat einen festen Wert.) Durch das Modifizieren der Kanäle können Sie alle Arten von Paletten erstellen.

js
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 folgendermaßen aus:

Spezifikationen

Specification
HTML Standard
# dom-context-2d-fillstyle-dev

Browser-Kompatibilität

BCD tables only load in the browser

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

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

Siehe auch