js实现雪花飘落效果的代码

时间:2023-03-09 01:01:55
js实现雪花飘落效果的代码

使用js实现雪花飘落的效果,用html5绘布加js写的雪花飘效果 。

代码:

<html>
<head>
<script>
/**
* js与html5实现的雪花飘落效果
* edit:www.jbxue.com
*/ function start(){ var array=new Array(); var canvas=document.getElementById("mycanvas"); var context=canvas.getContext("2d"); for(var i=0;i<50;i++){ var Showsnow=new showsnow(); array.push(Showsnow); } time=setInterval(function (){ context.clearRect(0,0,canvas.width,canvas.height);
for(var i=0;i<array.length;i++){ array[i].move();
array[i].draw(context); } },500); }
function showsnow(){
var y=parseInt(Math.random()*50)*10; var x=parseInt(Math.random()*80)*10; this.draw=function(context){ context.font="50px Calibri";
context.fillText("*",x,y); }
this.move=function(){
y+=20; if(y>600){
y=0;
}
}
}
</script>
</head> <body>
<input type="button" value="start" onclick="start()" />
<br/>
<canvas id="mycanvas" height="600px" width="600px" style="border: 3px solid blue"></canvas>
</body>
</html>