说说在 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 形状都可以按照上述方式为其添加阴影。