Canvas shadowOffsetX 属性
示例
绘制一个阴影位于右侧 20 像素的矩形（从矩形的左侧位置开始）
JavaScript
const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
ctx.shadowBlur = 10;
ctx.shadowOffsetX = 20;
ctx.shadowColor = "black";
ctx.fillStyle = "red";
ctx.fillRect(20, 20, 100, 80);
自己尝试 »
描述
shadowOffsetX 属性设置或返回阴影相对于形状的水平距离。
默认值为 0。
| 值 | 描述 |
|---|---|
| 0 | 阴影位于形状的正后方 |
| 20 | 阴影从形状的左侧位置开始向右偏移 20 像素 |
| -20 | 阴影从形状的左侧位置开始向左偏移 20 像素 |
另请参阅
shadowOffsetY 属性（设置阴影的 y 轴位置）
shadowColor 属性（设置阴影的颜色）
shadowBlur 属性（设置阴影的模糊度）
fillRect() 方法（绘制一个填充矩形）
fillStyle() 属性（设置填充颜色/样式）
语法
| context.shadowOffsetX = number |
属性值
| 值 | 描述 | 播放它 |
|---|---|---|
| number | 阴影相对于形状的水平距离 | 播放它 » |
浏览器支持
<canvas> 元素是 HTML5 标准（2014 年）。
shadowOffsetX 在所有现代浏览器中受支持
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
❮ Canvas 参考
