CanvasRenderingContext2D: shadowOffsetX 属性

基线 广泛可用

此功能已得到良好确立，并且可在许多设备和浏览器版本中使用。它自以下时间起在浏览器中可用： 2015 年 7 月.

Canvas 2D API 的 **CanvasRenderingContext2D.shadowOffsetX** 属性指定阴影在水平方向上的偏移距离。

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

值

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

示例

水平移动阴影

此示例为矩形添加模糊阴影。shadowColor 属性设置其颜色，shadowOffsetX 将其偏移 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.shadowOffsetX = 25;
ctx.shadowBlur = 10;

// Rectangle
ctx.fillStyle = "blue";
ctx.fillRect(20, 20, 150, 100);

结果

规范

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

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。

另请参阅