首页 > web前端 > H5教程 > Html5 Canvas初探学习笔记(8) -阴影

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

黄舟
发布: 2017-02-28 15:47:06
原创
1321 人浏览过

本篇继续介绍html5的一些状态值,html5的绘制上下文提供了丰富的效果,本篇介绍阴影的效果,阴影有四个状态值控制,分别是shadowBlurshadowOffsetXshadowOffsetYshadowColor。其中shadowBlur为阴影的像素模糊值,shadowOffsetXshadowOffsetY为阴影在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);
登录后复制

这里只是把阴影颜色设置为红色,由于xy的偏移值都没有设置,所以默认的就是这样的阴影包围状态,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) -阴影的内容,更多相关内容请关注PHP中文网(m.sbmmt.com)!


相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板