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
<canvas id="canvas"></canvas>
JavaScript
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
Loading…
WebKit/Blink-spezifische Hinweise
In WebKit- und Blink-basierten Browsern ist die nicht standardisierte und veraltete Methode ctx.setShadow()
neben dieser Eigenschaft implementiert.
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
- Das Interface, das diese Eigenschaft definiert:
CanvasRenderingContext2D
CanvasRenderingContext2D.shadowColor