Html5Canvas初探学习笔记(8)-阴影

本篇继续介绍 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); 

绘制的代码如下：

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) -阴影的内容，更多相关内容请关注PHP中文网（www.gxlcms.com）！

查看更多关于Html5Canvas初探学习笔记(8)-阴影的详细内容...