CanvasRenderingContext2D：shadowOffsetY 属性

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.

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

// 阴影
ctx.shadowColor = "red";
ctx.shadowOffsetY = 25;
ctx.shadowBlur = 10;

// 矩形
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 150, 80);

结果

规范

Specification
HTML Standard
# dom-context-2d-shadowoffsety-dev

浏览器兼容性

BCD tables only load in the browser

参见