CanvasRenderingContext2D:shadowOffsetX 属性

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.shadowOffsetX 属性用于描述阴影水平偏移距离。

备注: 只有当 shadowColor 属性设置为非透明值时,阴影才会被绘制。其中的 shadowBlurshadowOffsetXshadowOffsetY 属性中至少有一个必须是非零的。

一个浮点数,指定阴影在水平方向上的偏移距离。正值向右偏移,负值向左偏移。默认值为 0(无水平偏移)。InfinityNaN 值将被忽略。

示例

水平移动阴影

这个例子向一个矩形添加了模糊的阴影。shadowColor 属性设置阴影的颜色,shadowOffsetX 设置阴影向右偏移 25 个单位,而 shadowColor 设置阴影的模糊等级为 10。

HTML

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

JavaScript

js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

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

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

结果

规范

Specification
HTML
# dom-context-2d-shadowoffsetx-dev

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
shadowOffsetX

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

参见