【绘制】HTML5 Canvas 阴影（图文、代码示例）

我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。

教程介绍、教程目录等能在README里查阅。

传送门：https://github.com/827652549/CanvasStudy

阴影

介绍

Canvas的阴影效果可以作用在图形、文本及图像上，与四个属性值有关：

• shadowColor：CSS3格式的颜色
• shadowOffsetX：阴影水平方向的偏移
• shadowOffsetY：阴影垂直方向的偏移
• shadowBlur：越大越模糊。与像素无关，被用于高斯模糊方程中。

如果满足以下条件，就能绘制阴影效果：

1. 指定shadowColor值不是全透明的。
2. 其余阴影属性中，存在一个非0的值。

一种简单的方法来禁用阴影效果：shadowColor:undefine;

示例

https://827652549.github.io/Canvas/Unit2/Shadow.html

下面演示了一个fillRect和strokeRect的阴影效果。

var canvas =document.getElementById('canvas'),
        context = canvas.getContext('2d');

    context.lineWidth=3;

    context.shadowColor="rgba(0,0,0,0.75)";
    context.shadowOffsetX=5;
    context.shadowOffsetY=5;
    context.shadowBlur=5;
    context.strokeRect(20,20,50,50);
    context.fillRect(100,20,50,50);

小技巧：通常来说，颜色使用半透明色，这样背景就能够被显示出来。

阴影效果可能会耗时

如果前面章节所说的那样，为了绘制阴影，浏览器需要将阴影先渲染到一个辅助的位图中，在将位图上的内容与屏幕Canvas进行图像合成。由于使用了这种辅助位图，所以绘制阴影可能是一件很耗时的操作。

如果操作的是简单的图形、文本或图像，阴影的绘制可能不会带来性能上的问题，但对于动画的阴影绘制来说，其性能要比不用阴影时要差一些。