说说在 Canvas 中如何添加阴影

Posted 2023-03-30

参考技术A

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

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

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

运行结果：

图片来源于网络。

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

运行结果：

修改阴影颜色为深空灰：

运行结果：

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

Canvas 中的 Shadow 详解

本章节主要讲述 boxShadow 投影，通过对本章节的学习将会对 CSS 和 Canvas 中的投影有比较深入的理解，为后续业务中实现复杂的投影效果做技术储备。

1. 什么是 box-shadow

box-shadow 属性用于在元素的框架上添加阴影效果。你可以在同一个元素上设置多个阴影效果，并用逗号将他们分隔开。该属性可设置的值包括阴影的 X 轴偏移量、Y 轴偏移量、模糊半径、扩散半径和投影颜色。下图展示了为元素设置不同 box-shadow 后实际的展示效果：

文章下部分将逐个介绍 box-shadow 中每一个属性的具体值，以及它是如何影响投影的渲染效果的。

2.box-shadow 属性详解

上文讲述过 box-shadow 用于创建阴影, 使得元素更有立体感。它的值由以下六个部分组成:

它们分别为： x 轴偏移，y 轴偏移，模糊半径&大小，颜色，位置。xy 轴偏移, 参照 CSS 中的坐标系, 水平向右为 X 轴正方向, 垂直向下为 Y 轴正方向。下面对每一个属性表示的几何意义做深入讲解。

2.1 offsetX

即水平偏移, 值取正数时, 阴影位于元素右边, 值取负数时, 阴影位于元素左边(好好理解上面说的 CS