CanvasRenderingContext2D: shadowOffsetY 属性

基线 广泛可用

此功能已成熟，并在许多设备和浏览器版本中都能正常工作。自 2015 年 7 月.

Canvas 2D API 的 CanvasRenderingContext2D.shadowOffsetY 属性指定阴影在垂直方向上的偏移距离。

注意：仅当 shadowColor 属性设置为非透明值时才会绘制阴影。另外，shadowBlur、shadowOffsetX 或 shadowOffsetY 属性之一必须为非零值。

值

一个浮点数，指定阴影在垂直方向上的偏移距离。正值表示向下偏移，负值表示向上偏移。默认值为 0（无垂直偏移）。Infinity 和 NaN 值将被忽略。

示例

垂直移动阴影

此示例向矩形添加模糊阴影。shadowColor 属性设置阴影颜色，shadowOffsetY 设置阴影向下的偏移距离为 25 个单位，shadowBlur 设置模糊级别为 10。

HTML

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

JavaScript

js
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);

结果

规范

规范
HTML 标准
# dom-context-2d-shadowoffsety-dev

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅