本篇继续介绍html5的一些状态值，html5的绘制上下文提供了丰富的效果，本篇介绍阴影的效果，阴影有四个状态值控制，分别是shadowblur，shadowoffsetx，shadowoffsety和shadowcolor。其中shadowblur为阴影的像素模糊值，shadowoffsetx和shadowoffsety为阴影在x轴和y轴上的偏移值，shadowcolor为阴影颜色值，其中默认的值是前三个值都为0，最后一个值设置为透明黑色。只需修改其中的两个值就可以显现出来阴影效果，如下面的例子所示，同时下面的例子也证明了他是一个状态值，也可以使用save保存和restore弹出。
绘制的代码如下
context.fillstyle = "red"; context.save(); context.shadowblur = 20; context.shadowcolor = "rgb(255,0,0)"; context.fillrect(50,50,100,100); context.restore(); context.fillrect(200,50,100,100);
这里只是把阴影颜色设置为红色，由于x和y的偏移值都没有设置，所以默认的就是这样的阴影包围状态，shadowcolor 设置为全不透的红色，也可以通过argb值来设置透明度，但是对应阴影的区别不大：
修改为如下的代码，效果如下：
绘制的代码如下：
context.fillstyle = "red"; context.save(); context.shadowblur = 20; context.shadowcolor = "rgb(255,0,0)"; context.fillrect(50,50,100,100); context.shadowcolor = "argb(255,0,0,0.5)"; context.fillrect(200,50,100,100);
阴影在x轴和y轴上的偏移值，顾名思义，就是让阴影发生偏移，分别在x轴和在y轴上偏移相应的距离。效果如下：
context.fillstyle = "red"; context.shadowblur = 20; context.shadowcolor = "rgb(255,0,0)"; context.shadowoffsetx = 15; context.shadowoffsety = 15; context.fillrect(50,50,100,100);
阴影不止适用于正方形，其他图形也可以：
context.fillstyle = "red"; context.shadowblur = 20; context.shadowcolor = "rgb(255,0,0)"; context.shadowoffsetx = 15; context.shadowoffsety = 15; context.beginpath();//开始路径 context.arc(100,100,60,math.pi / 6,math.pi,true); context.closepath(); context.fill();//填充 context.beginpath();//开始路径 context.moveto(200,50);//设置路径，参数为原点 context.lineto(360,50);//设置路径直到本线段的终点 context.lineto(360,150);//设置路径直到本线段的终点 context.closepath();//结束路径 context.fill();//正式绘制
以上就是html5 canvas初探学习笔记(8) -阴影的内容。