Canvas 中的 Shadow 详解
Posted liangklfang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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
以上是关于Canvas 中的 Shadow 详解的主要内容，如果未能解决你的问题，请参考以下文章