说说在 Canvas 中如何添加阴影

Canvas 的 context 中有四个参数可以用于设置阴影相关属性。

方法名说明shadowOffsetX阴影 x 轴偏移量。可以为正值或负值；负值表示在左侧和上方创建阴影，正值表示在底部和右侧创建阴影。shadowOffsetY阴影 y 轴偏移量。其它特性与阴影 x 轴偏移量相同。shadowBlur设置阴影模糊程度。shadowColor设置阴影颜色。可以是颜色名称、rgb()、rgba() 或十六进制数值字符串。

我们有一张 500×500 像素的图片。

现在为其添加一个往左上偏移的阴影。

var fillImg = new Image(); fillImg.src = 'girl2.jpg'; fillImg.onload = function () { context.shadowOffsetX=-4; context.shadowOffsetY=-4; context.shadowColor='black'; context.shadowBlur=4; context.fillStyle=context.createPattern(fillImg, 'no-repeat'); context.fillRect(10,10,700,700); }

运行结果：

图片来源于网络。

示例略作修改，就可以为图片设置右下阴影效果：

context.shadowOffsetX=10; context.shadowOffsetY=10;

运行结果：

修改阴影颜色为深空灰：

context.shadowColor='rgb(100,100,100)';

运行结果：

---

除了图片，任何 Canvas 形状都可以按照上述方式为其添加阴影。