基于html5-canvas实现漫天飞雪效果实例.docVIP

本文实例讲述了基于html5canvas实现漫天飞雪效果的方法，运行该实例可以看到很棒的下雪效果。如下图所示：

主要代码如下：gt;gt;

lt;htmlxmlns=lt;ahref=gt;gt;

lt;headgt;

lt;metahttp-equiv=Content-Typecontent=text/html;charset=gb2312/gt;

lt;titlegt;漫天飞雪lt;/titlegt;

lt;styletype=text/cssgt;

*{margin:0;padding:0;}lt;/pgt;lt;pgt;body{

/*Youcanuseanykindofbackgroundhere.*/

background:#6b92b9;

}

canvas{

display:block;

}

lt;/stylegt;

lt;/headgt;lt;/pgt;lt;pgt;lt;bodygt;lt;/pgt;lt;pgt;lt;divstyle=background:#6b92b9;width:100%;height:2000px;gt;lt;/divgt;

lt;canvasid=canvasstyle=position:fixed;top:0px;left:0px;z-index:80;pointer-events:none;gt;lt;/canvasgt;lt;/pgt;lt;pgt;lt;scriptgt;

window.onload=function(){

//canvasinit

varcanvas=document.getElementById(canvas);

varctx=canvas.getContext(2d);

//canvasdimensions

varW=window.innerWidth;

varH=window.innerHeight;

canvas.width=W;

canvas.height=H;

//snowflakeparticles

varmp=3000;//maxparticles

varparticles=[];

for(vari=0;ilt;mp;i++)

{

particles.push({

x:Math.random()*W,//x-coordinate

y:Math.random()*H,//y-coordinate

r:Math.random()*3+1,//radius

d:Math.random()*mp//density

})

}

//Letsdrawtheflakes

functiondraw()

{

ctx.clearRect(0,0,W,H);

ctx.fillStyle=rgba(255,255,255,0.8);

/*ctx.fillStyle=#FF0000;*/

ctx.beginPath();

for(vari=0;ilt;mp;i++)

{

varp=particles[i];

ctx.moveTo(p.x,p.y);

ctx.arc(p.x,p.y,p.r,0,Math.PI*2,true);

}

ctx.fill();

update();

}

//Functiontomovethesnowflakes

//anglewillbeanongoingincrementalflag.SinandCosfunctionswillbeappliedtoittocreateverticalandhorizontalmovementsoftheflakes

varangle=0;

functionupdate()

{

angle+=0.01;

for(vari=0;ilt;mp;i++)

{

varp=particles[i];

//UpdatingXandYcoordinates

//Wewilladd1tothecosfunctiontopreventnegativevalueswhichwillleadflakestomoveupwa