Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.

View in English Always switch to English

CanvasRenderingContext2D: shadowBlur-Eigenschaft

Baseline Widely available

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

Die CanvasRenderingContext2D.shadowBlur-Eigenschaft der 2D-Canvas-API legt die Menge an Unschärfe fest, die auf Schatten angewendet wird. Der Standardwert ist 0 (keine Unschärfe).

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 nicht-negatives float, das das Unschärfelevel des Schattens angibt, wobei 0 keine Unschärfe repräsentiert und größere Zahlen eine zunehmend stärkere Unschärfe darstellen. Dieser Wert entspricht keiner Anzahl von Pixeln und wird nicht von der aktuellen Transformationsmatrix beeinflusst. Der Standardwert ist 0. Negative Werte, Infinity und NaN werden ignoriert.

Beispiele

Hinzufügen eines Schattens zu einer Form

Dieses Beispiel fügt einem Rechteck einen unscharfen Schatten hinzu. Die shadowColor-Eigenschaft legt deren Farbe fest, und shadowBlur bestimmt das Unschärfelevel.

HTML

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

JavaScript

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

// Shadow
ctx.shadowColor = "red";
ctx.shadowBlur = 15;

// Rectangle
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 150, 100);

Ergebnis

Spezifikationen

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

Browser-Kompatibilität

In WebKit- und Blink-basierten Browsern ist die nicht standardisierte und veraltete Methode ctx.setShadow() neben dieser Eigenschaft 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