欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-05-10 23:10:13
...
本篇继续介绍html5的一些状态值,html5的绘制上下文提供了丰富的效果,本篇介绍阴影的效果,阴影有四个状态值控制,分别是shadowBlurshadowOffsetXshadowOffsetYshadowColor。其中shadowBlur为阴影的像素模糊值,shadowOffsetXshadowOffsetY为阴影在x轴和y轴上的偏移值,shadowColor为阴影颜色值,其中默认的值是前三个值都为0,最后一个值设置为透明黑色。只需修改其中的两个值就可以显现出来阴影效果,如下面的例子所示,同时下面的例子也证明了他是一个状态值,也可以使用save保存和restore弹出。

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


绘制的代码如下

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);

这里只是把阴影颜色设置为红色,由于xy的偏移值都没有设置,所以默认的就是这样的阴影包围状态,shadowColor 设置为全不透的红色,也可以通过argb值来设置透明度,但是对应阴影的区别不大:

修改为如下的代码,效果如下:

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


绘制的代码如下:

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轴上偏移相应的距离。效果如下:

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

context.fillStyle = "red";
context.shadowBlur = 20;
context.shadowColor = "rgb(255,0,0)";
context.shadowOffsetX = 15;
context.shadowOffsetY = 15;
context.fillRect(50,50,100,100);

阴影不止适用于正方形,其他图形也可以:

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

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.php.cn)!