CanvasRenderingContext2D: shadowColor-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.shadowColor Eigenschaft der Canvas 2D API legt die Farbe von Schatten fest.

Beachten Sie, dass die sichtbare Deckkraft des Schattens von der Deckkraft der fillStyle-Farbe beim Füllen und der strokeStyle-Farbe beim Streichen beeinflusst wird.

Hinweis: Schatten werden nur gezeichnet, wenn die shadowColor Eigenschaft auf einen nicht-transparenten Wert gesetzt ist. Eine der Eigenschaften shadowBlur, shadowOffsetX oder shadowOffsetY muss ebenfalls ungleich null sein.

Wert

Ein String, der als CSS <color> Wert analysiert wird. Der Standardwert ist vollständig transparentes Schwarz.

Beispiele

Hinzufügen eines Schattens zu Formen

Dieses Beispiel fügt zwei Quadraten einen Schatten hinzu; das erste wird gefüllt und das zweite wird umrandet. Die shadowColor-Eigenschaft legt die Farbe der Schatten fest, während shadowOffsetX und shadowOffsetY ihre Position relativ zu den Formen festlegen.

HTML

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

JavaScript

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

// Shadow
ctx.shadowColor = "red";
ctx.shadowOffsetX = 10;
ctx.shadowOffsetY = 10;

// Filled rectangle
ctx.fillRect(20, 20, 100, 100);

// Stroked rectangle
ctx.lineWidth = 6;
ctx.strokeRect(170, 20, 100, 100);

Ergebnis

Schatten auf durchscheinenden Formen

Die Deckkraft eines Schattens wird durch das Transparenzniveau seines übergeordneten Objekts beeinflusst (selbst wenn shadowColor einen vollständig undurchsichtigen Wert angibt). Dieses Beispiel zeichnet und füllt ein Rechteck mit durchscheinenden Farben.

HTML

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

JavaScript

Der resultierende Alpha-Wert des Füllschattens ist .8 * .2 oder .16. Der Alpha-Wert des Umrissschattens ist .8 * .6 oder .48.

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

// Shadow
ctx.shadowColor = "rgb(255 0 0 / 80%)";
ctx.shadowBlur = 8;
ctx.shadowOffsetX = 30;
ctx.shadowOffsetY = 20;

// Filled rectangle
ctx.fillStyle = "rgb(0 255 0 / 20%)";
ctx.fillRect(10, 10, 150, 100);

// Stroked rectangle
ctx.lineWidth = 10;
ctx.strokeStyle = "rgb(0 0 255 / 60%)";
ctx.strokeRect(10, 10, 150, 100);

Ergebnis

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser

In WebKit- und Blink-basierten Browsern ist neben dieser Eigenschaft die nicht standardisierte und veraltete Methode ctx.setShadow() implementiert.

js
setShadow(width, height, blur, color, alpha);
setShadow(width, height, blur, graylevel, alpha);
setShadow(width, height, blur, r, g, b, a);
setShadow(width, height, blur, c, m, y, k, a);

Siehe auch