说说在 Canvas 中如何添加阴影

约定不等于承诺〃 2022-12-12 13:46 285阅读 0赞

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

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

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

![3c22732ba9417ebcd12ebb64ce3d29c6.png][]

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

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);
    
      }

运行结果：

![aa98d6615e6cd60b55274c0d7f487fce.png][]

*图片来源于网络。*

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

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

运行结果：

![64ce904d62f70e3c37ca4d64c29e20a6.png][]

修改阴影颜色为深空灰：

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

运行结果：  
![1f7d0b17fadbb0404a7f629725f7291d.png][]

--------------------

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

[3c22732ba9417ebcd12ebb64ce3d29c6.png]: /images/20221123/dfbf8517f0b44334a3f8feb4c69ae8ee.png
[aa98d6615e6cd60b55274c0d7f487fce.png]: /images/20221123/ba47fca9e6f64d458bbe3dae2c018f4a.png
[64ce904d62f70e3c37ca4d64c29e20a6.png]: /images/20221123/82b82582608849f7a923ad9bda4c5d33.png
[1f7d0b17fadbb0404a7f629725f7291d.png]: /images/20221123/491bddc6fdc94d04a725be8bf973ab84.png