CanvasRenderingContext2D: shadowOffsetY-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.shadowOffsetY
-Eigenschaft der Canvas 2D API gibt die Entfernung an, um die Schatten vertikal versetzt werden.
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
Beispiele
Einen Schatten vertikal verschieben
Dieses Beispiel fügt einem Rechteck einen verschwommenen Schatten hinzu. Die shadowColor
-Eigenschaft legt seine Farbe fest, shadowOffsetY
legt seinen Versatz um 25 Einheiten nach unten fest, und shadowBlur
gibt ihm einen Unschärfegrad von 10.
HTML
<canvas id="canvas"></canvas>
JavaScript
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// Shadow
ctx.shadowColor = "red";
ctx.shadowOffsetY = 25;
ctx.shadowBlur = 10;
// Rectangle
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 150, 80);
Ergebnis
Spezifikationen
Specification |
---|
HTML Standard # dom-context-2d-shadowoffsety-dev |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Das Interface, das diese Eigenschaft definiert:
CanvasRenderingContext2D
CanvasRenderingContext2D.shadowOffsetX
CanvasRenderingContext2D.shadowColor
CanvasRenderingContext2D.shadowBlur