Html5 canvas画图教程21:阴影shadow

本文属于《html5 Canvas画图系列教程

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

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

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

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

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

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

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

1
2
3
4
5
6
7
8
9
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的研究表示,使用阴影的性能消耗较大,还是少用为妙——但并不是叫你不用哈

发表评论

电子邮件地址不会被公开。