css3下雪的效果,canvas实现简单的下雪效果

canvas实现简单的下雪效果

快到找工作的时候，我也开始想着写个什么小东西好，因为本人能力有限，那些炫酷的效果是无法搞出来，

所以想了想想做出个类似canvas下雨效果的小demo，然后呢，到了网上啪的一搜索(百度是最好的老师)，

哇，真的多，可是这些确实有点难。。。理解不了怎么办呢？总不能扣下别人的源码吧，我退而求其次，

想到了用canvas实现一种下雪的效果。

首先，确定好思路，我们要确定的有这么几点，首先，我们得在canvas上画出动的"雪"，比如，在上面画几十条小线条，当然很明确的一点是用到了面向对象思想。面向对象基础廖大牛讲的是真的好 ，链接：    http://www.liaoxuefeng.com/

首先确定雪应该有的属性，比如雪的长度，雪的厚度，以及雪的位置，

//创建雪的对象

functionYd(beginX,beginY,stopX,stopY,widths,speedX,speedY){

this.beginX=beginX;//雪花起点x

this.beginY=beginY;//雪花起点y

this.stopX=stopX;//雪花终点x

this.stopY=stopY;//雪花终点y

this.widths=widths;//雪花宽度

this.speedX=speedX;//雪花横坐标移动速度

this.speedY=speedY;//雪花纵坐标移动速度

this.color="white";//雪花颜色

}

然后接下来要做的就是需要将所有数值随机，并将他们存入数组中

//创建随机函数

functionsjs(max,min){

returnparseInt(Math.random()*(max-min)+min);

}

varydarr=newArray();

for(leti=0;i<50;i++){

vara=sjs(x1,0);

varb=sjs(y1,0);

varc=sjs(a,a-20);

vard=sjs(b,b-20);

vare=sjs(2,0);

varf=sjs(5,3);

varg=sjs(5,3);

vark=newYd(a,b,c,d,e,f,g);

ydarr.push(k);

}

最后要做的，就是设置定时器让他们动起来

for(leti=0;i<50;i++)

{

ctx.beginPath();

ctx.moveTo(ydarr[i].beginX,ydarr[i].beginY);

ctx.lineWidth=ydarr[i].widths;

ctx.strokeStyle=ydarr[i].color;

ctx.lineTo(ydarr[i].stopX,ydarr[i].stopY);

ctx.stroke();

}

可是这样子就造成了你的canvas中有许多类似头皮屑在飞舞一样。。。怎么办呢，可以使用css3的滤镜属性来实现哦~~

filter简称滤镜，可以设置元素的视觉效果，想深一步研究的小哥们可以去w3cSchool看一下下哦

http://www.runoob.com/cssref/css3-pr-filter.html

最后效果就是比较简单的下雪效果，搭配上深色背景图，嘛效果还算不错