Html5 canvas画图教程21:阴影shadow_H5之家 - 中国HTML5教程资源分享第一站

canvas也能画出阴影，也就是投影效果。

上节课我讲了在canvas中“写字”的方法，阴影和字体一样需要设置，但设置的方式却大相径庭。

字体的设置由一个font包办，而阴影却不能用一个shadow来垄断。

canvas的阴影有4个分开的设置项：

属性	描述
shadowOffsetX	阴影的水平偏移，单位是数字，可以是负值.
shadowOffsetY	阴影的垂直偏移，单位是数字，可以是负值.
shadowBlur	阴影的模糊度，单位是数字.
shadowColor	阴影的颜色

其中的shadowOffsetX,shadowOffsetY,的单位都是数字，而不是’2px’这样的字符串。

我们用上节课的文字来加上阴影效果：

	
						ctx.shadowColor = "#00f";

						ctx.shadowBlur = 1;

						ctx.shadowOffsetX = 5;

						ctx.shadowOffsetY = 4;

						ctx.font = "bolder 33px Arial menu";

						ctx.fillStyle="#f00";

						ctx.strokeStyle="#0f0";

						ctx.fillText('1223',50,50);

						ctx.strokeText('asdfsadf',150,50);

图中蓝色部分就是shadow。由图可知，当画出的图形是描边的，其阴影也是空心的，这点很不错。

分开设置是有好处的，比如只想改一下阴影颜色的话就只用改一下shadowColor即可。

另外，shadowColor支持rgba颜色模式，可以用来做半透明的阴影。

重要：beginPath不会消除阴影。当然，这才是正常的，如果每个新路径都要重新设置一下阴影，那才是麻烦。

如果我要让以后的图形变成没有阴影的状态，怎么办？用前面讲的save与restore.

另外，html5rock的研究表示，使用阴影的性能消耗较大，还是少用为妙——但并不是叫你不用哈