下雪实例


知识点：

canvas画布

数组

绘画函数



效果：

源码：

------------------------------

<!doctypehtml><htmllang="en"><head><metacharset="UTF-8"><metaname="Generator"content=""><metaname="Author"content=""><metaname="Keywords"content=""><metaname="Description"content=""><title>下雪</title><style>*{padding:0;margin:0}html{overflow:hidden}</style></head><body><canvasid="canvas"></canvas><audiosrc="http://dx.sc.chinaz.com/Files/DownLoad/sound1/201210/2178.mp3"autoplayloop/><audiosrc="http://dx.sc.chinaz.com/Files/DownLoad/sound1/201205/1430.mp3"autoplayloop/><scripttype="text/javascript">window.onload=function(){//获取画布对象varcanvas=document.getElementById("canvas");//获取画布的上下文varcontext=canvas.getContext("2d");//获取浏览器屏幕的宽度和高度varw=window.innerWidth;varh=window.innerHeight;//设置canvas的宽度和高度canvas.width=w;canvas.height=h;//1：如何产生雪花,一个圆,arc(x,y,r,start,end)//初始化雪花数量varnum=200;//雪花数组varsnows=[];for(vari=0;i<num;i++){//x,y圆心掉的坐标位置，r代表圆的半径，d每个圆的每个圆之间的间距，c代表的颜色varr=randColor();snows.push({x:Math.random()*w,y:Math.random()*h,r:Math.random()*10,d:Math.random()*num});};//绘画的函数functiondraw(){context.clearRect(0,0,w,h);context.beginPath();for(vari=0;i<num;i++){varsnow=snows[i];context.fillStyle="rgba(255,255,255,0.9)";context.moveTo(snow.x,snow.y);context.arc(snow.x,snow.y,snow.r,0,Math.PI*2);}context.fill();//掉落drop();};varangle=0;functiondrop(){angle+=0.01;for(vari=0;i<num;i++){varp=snows[i];//记住两个公式：Math.sin(弧度)返回是一个01-1的数字//math.cos(10-1)自由体，p.y+=Math.cos(angle+p.d)+1+p.r*0.625;p.x+=Math.sin(angle)*8;//如果雪花到了边界，进行边界处理if(p.x>w+5||p.x<-5||p.y>h){if(i%4>0){snows[i]={x:Math.random()*w,y:-10,r:p.r,d:p.d};}else{//控制方向if(Math.sin(angle)>0){snows[i]={x:-5,y:Math.random()*h,r:p.r,d:p.d};}else{snows[i]={x:w+5,y:Math.random()*h,r:p.r,d:p.d};}}}}};//执行和调用函数draw();setInterval(draw,10);//随机颜色functionrandColor(){varr=Math.floor(Math.random()*256);varg=Math.floor(Math.random()*256);varb=Math.floor(Math.random()*256);return"rgb("+r+","+g+","+b+")";};};</script></body></html>