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();//正式绘制

如有错误,希望大家多多指正

下一篇继续研究绘制的高级功能


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

给定A, B两个整数,不使用除法和取模运算,求A/B的商和余数

给定A, B两个整数,不使用除法和取模运算,求A/B的商和余数。 1.   最基本的算法是,从小到大遍历: for (i = 2 to A -1)          if (i * B > A)...

利用K-means聚类算法根据经纬度坐标对中国省市进行聚类

K-means聚类算法是一种非层次聚类算法,在最小误差的基础上将数据划分了特定的类,类间利用距离作为相似度指标,两个向量之间的距离越小,其相似度就越高。程序读取全国省市经纬度坐标,然后根据经纬度坐标进...

Radon变换理论介绍与matlab实现--经验交流

本人最近在研究Radon变换,在查阅了各种资料之后在此写下个人的理解,希望与各位牛牛进行交流共同进步,也使得理解更加深刻些。 Radon变换的本质是将原来的函数做了一个空间转换,即,将原来的XY平...

Matlab绘图-很详细,很全面

Matlab绘图强大的绘图功能是Matlab的特点之一,Matlab提供了一系列的绘图函数,用户不需要过多的考虑绘图的细节,只需要给出一些基本参数就能得到所需图形,这类函数称为高层绘图函数。此外,Ma...

CT图像重建技术

由于csdn贴图不方便,并且不能上传附件,我把原文上传到了资源空间CT图像重建技术 1.引言 计算机层析成像(Computed Tomography,CT)是通过对物体进行不同角度的射线投影测量而...

linux查找目录下的所有文件中是否含有某个字符串

查找目录下的所有文件中是否含有某个字符串  find .|xargs grep -ri "IBM"  查找目录下的所有文件中是否含有某个字符串,并且只打印出文件名  find .|xargs g...

Radon变换入门matlab CT原理

http://hi.baidu.com/hi9394/blog/item/0d492b8bfd714700c8fc7aa9.html 简介 图像投影,就是说将图像在某一方向上做线性积分(或理解为累...

Intel系列处理器的三种工作模式

Intel系列处理器的三种工作模式 微机中常用的Intel系列微处理器的主要发展过程是:8080,8086/8088,80186, 80286,80386,80486,Pentium,Pen...

js弹出框、对话框、提示框、弹窗总结

js弹出框、对话框、提示框、弹窗总结 一、JS的三种最常见的对话框 [javascript] view plaincopy //=...

form表单的两种提交方式,submit和button的用法

1.当输入用户名和密码为空的时候,需要判断。这时候就用到了校验用户名和密码,这个需要在jsp的前端页面写;有两种方法,一种是用submit提交。一种是用button提交。 方法一: 在jsp的...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Html5 Canvas初探学习笔记(8) -阴影
举报原因:
原因补充:

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