canvas+js 完成雪花绘制-CSDN博客

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
body {
background:#45aad7;
margin:0;
padding:0;
}
html, body{
height:100%;
width:100%;
}
#myCanvas{
height:100%;
width:100%;
display: block;
}
</style>

<body>
<canvas id="myCancva" width="1000px" height="600px">your browser does not support
the Canvas element</canvas>
<script type="text/javascript">
/* */
var canvas=document.getElementById('myCancva');
var context=canvas.getContext('2d');

var particles=[];//为雪花粒子创建一个数组
for(var i=0;i<1500;i++){//循环500次生成500个雪花
particles.push({//设置 x y 位置。以及速度。还有雪花的大小颜色
x:Math.random()*window.innerWidth,
y:Math.random()*window.innerWidth,
vx:(Math.random()*1-.5),//速度为-0.5----0.5
vy:(Math.random()*1+.5),//速度为0.5-1.5
size:1+Math.random()*2,//大小是1---3
color:"#fff"//白色

});
}
function timeUpdata(e){
//clearRect() 方法删除一个画布的矩形区域。
context.clearRect(0,0,window.innerWidth,window.innerHeight);//清除画布区域
var particle;
for(var i=0;i<1500;i++){//遍历所有雪花
particle=particles[i];
particle.x+=particle.vx;//更新雪花的 x y 位置
particle.y+=particle.vy;

if(particle.x<0){
particle.x=window.innerWidth;//当雪花移动到左侧以外时。使其在出现于窗口右侧
}
if(particle.x>window.innerWidth){
particle.x=0;
}
if(particle.y>window.innerHeight){//当雪花移动到窗口顶部以外时，使其重新出现在窗口内部
particle.y=0;
}
context.fillStyle=particle.color;//设置雪花颜色
context.beginPath();//开始绘制雪花
context.arc(particle.x ,particle.y, particle.size,0,Math.PI*2);
context.closePath();//闭合路径
context.fill();//填充颜色
}
}
setInterval(timeUpdata,40);//40毫秒调用一次
</script>
</body>