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 July 2015.
Die CanvasRenderingContext2D.shadowBlur
-Eigenschaft der Canvas 2D API gibt die Menge der Unschärfe an, die auf Schatten angewendet wird. Der Standardwert ist 0
(keine Unschärfe).
Hinweis: Schatten werden nur gezeichnet, wenn die
shadowColor
-Eigenschaft auf einen undurchsichtigen Wert gesetzt ist. Eine der shadowBlur
,
shadowOffsetX
oder
shadowOffsetY
-Eigenschaften muss ebenfalls ungleich null sein.
Wert
Ein nicht-negativer Float, der das Maß der Schattenunschärfe angibt, wobei 0
keine Unschärfe darstellt und größere Zahlen zunehmend mehr Unschärfe bedeuten. Dieser Wert entspricht nicht einer Anzahl von Pixeln und wird nicht durch die aktuelle Transformationsmatrix beeinflusst. Der Standardwert ist 0
. Negative, Infinity
und NaN
Werte werden ignoriert.
Beispiele
Hinzufügen eines Schattens zu einer Form
Dieses Beispiel fügt einem Rechteck einen unscharfen Schatten hinzu. Die shadowColor
-Eigenschaft setzt dessen Farbe, und shadowBlur
bestimmt das Maß der Unschärfe.
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 Standard # dom-context-2d-shadowblur-dev |
Browser-Kompatibilität
BCD tables only load in the browser
WebKit/Blink-spezifische Hinweise
In WebKit- und Blink-basierten Browsern ist neben dieser Eigenschaft auch die nicht standardisierte und veraltete Methode ctx.setShadow()
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