javascript下雪特效

大多数人一到冬天就十分期待下雪，且认为下雪是十分浪漫的事情。网络上说程序员不懂得浪漫其实是不对的，程序员们可以使用计算机语言制造浪漫，例如使用JavaScript制作下雪特效。

1、效果实现功能：

（1）最多片数；

（2）雪花形状；

（3）坠落速度；

2、实现原理：

将代码保存为 js 文件，最后在网站引用即可。

第一步：控制下雪可配置属性（片数、形状和坠落速度）

/*控制下雪*/
functionsnowFall(snow){
/*可配置属性*/
snow=snow||{};
this.maxFlake=snow.maxFlake||200;/*最多片数*/
this.flakeSize=snow.flakeSize||10;/*雪花形状*/
this.fallSpeed=snow.fallSpeed||1;/*坠落速度*/
}

第二步：创建画布，定义雪花形状

/*创建雪花-定义形状*/
functioncreateFlakes(){
varmaxFlake=this.maxFlake,
flakes=this.flakes=[],
canvas=this.canvas;
for(vari=0;i<maxFlake;i++){
flakes.push(newflakeMove(canvas.width,canvas.height,this.flakeSize,this.fallSpeed))
}
}

第三步：设置雪运动对象

/*雪运动对象*/
functionflakeMove(canvasWidth,canvasHeight,flakeSize,fallSpeed){
this.x=Math.floor(Math.random()*canvasWidth);/*x坐标*/
this.y=Math.floor(Math.random()*canvasHeight);/*y坐标*/
this.size=Math.random()*flakeSize+2;/*形状*/
this.maxSize=flakeSize;/*形状*/
this.speed=Math.random()*1+fallSpeed;/*坠落速度*/
this.fallSpeed=fallSpeed;/*坠落速度*/
this.velY=this.speed;/*Y方向速度*/
this.velX=0;/*X方向速度*/
this.stepSize=Math.random()/30;/*步长*/
this.step=0/*步数*/
}

第四步：清空雪花

/*画雪*/
functiondrawSnow(){
varmaxFlake=this.maxFlake,
flakes=this.flakes;
ctx=this.ctx,canvas=this.canvas,that=this;
/*清空雪花*/
ctx.clearRect(0,0,canvas.width,canvas.height);
for(vare=0;e<maxFlake;e++){
flakes[e].update();
flakes[e].render(ctx);
}
/*一帧一帧的画*/
this.loop=requestAnimationFrame(function(){
drawSnow.apply(that);
});
}

以上就是JavaScript中下雪特效的代码过程，小伙伴们可以更改设置的数据改变特效的效果哦~更多js教程：js教程。