【第22期】观点:IT 行业加班,到底有没有价值?

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

原创 2012年03月29日 21:39:24

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man

本篇继续介绍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简明教程-1.1.3.HTML5Canvas参考手册 之 阴影shadowColor、shadowBlur、shadowOffsetX、shadowOffsetY

HTML5的画布给我们提供了绘制元素阴影的功能,主要的属性包括如下几个:shadowColor、shadowBlur、shadowOffsetX、shadowOffsetY。其中shadowColor...

HTML5 Canvas阴影用法演示

演示Canvas中shadow属性的设置应用与技巧。实现文字的边缘模糊效果,阴影效果3D拉影效果等

程序员升职加薪指南!还缺一个“证”!

CSDN出品,立即查看!

canvas元素的内发光效果

我们知道使用CSS3可以实现阴影效果,box-shadow: 0px 0px 5px 5px black; 可以想象成是一个颜色为"black"的相同大小的阴影块在你要渲染的块的下面。     前面...
  • zrzlj
  • zrzlj
  • 2012-10-08 09:21
  • 5918

Html5 Canvas初探学习笔记(12) -图片裁减和调整

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man 上一篇讲了图片的两种操作,读入和导出,而...

Html5 Canvas初探学习笔记(1)-画一个矩形

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man canvas元素是Html5相对于之前的
  • isiqi
  • isiqi
  • 2012-03-19 22:31
  • 358

Html5 Canvas初探学习笔记(9) -渐变

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man 本篇继续介绍html5的绘制效果,和之前介绍...

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

小满(bill man)个人原创,欢迎转载,转载请注明地址,小满(bill man)的专栏地址http://blog.csdn.net/bill_man 本篇继续介绍html5的一些状态值,html5的绘制上下文提供了丰富的效果,本篇介绍阴影的效果,阴影有四个状态值控制,分别是</
  • isiqi
  • isiqi
  • 2012-03-29 21:39
  • 328
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)