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 gibt die Farbe, den Verlauf oder das Muster an, das innerhalb von Formen verwendet werden soll. Der Standardstil ist #000 (schwarz).

Hinweis: Weitere Beispiele für Füll- und Strichstile finden Sie unter Anwenden von Stilen und Farben im Canvas-Leitfaden.

Wert

Einer der folgenden:

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 Gitter aus Rechtecken zu zeichnen, von denen jedes eine andere Füllfarbe hat. Dazu verwenden wir die beiden Variablen i und j, um eine eindeutige RGB-Farbe für jedes Quadrat zu generieren, und ändern nur die roten und grünen Werte. (Der blaue Kanal hat einen festen Wert.) Durch Ändern der Kanäle können Sie alle Arten von Paletten generieren.

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 so aus:

Spezifikationen

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

Browser-Kompatibilität

In auf WebKit und Blink basierenden 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