实现一个简易的雪花效果

这一个月人确实懒下来了，一转眼到月底了，还没有学习，那就给自己找个借口吧。

在电脑里发现了刚入门时，自己实现的雪花效果。

回味下吧

<canvas id="myCanvas" width="1000" height="600"></canvas>
<script type="text/javascript">
  var canvas=document.getElementById('myCanvas');
  var context=canvas.getContext('2d');

  var particles=[]; //为粒子创建一个数组
  for(var i=0;i<500;i++){
    particles.push({
      x:Math.random()*window.innerWidth, //雪花初始x位置
      y:Math.random()*window.innerHeight,//雪花初始y位置
      vx:(Math.random()*1-.5),//x方向上的速度
      vy:(Math.random()*1+.5),//y方向上的速度
      size:1+Math.random()*2,//雪花的大小
      color:'#fff'//雪花颜色
    })
  }

  function timeUpdate(e){
    context.clearRect(0,0,window.innerWidth,window.innerHeight);//清除画布区域
    var particle;
    for(var i=0;i<500;i++){
      particle=particles[i];
      particle.x+=particle.vx;//更新雪花的x位置
      particle.y+=particle.vy;//更新雪花的y位置
      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(timeUpdate,40);//每过40毫秒执行一次函数
</script>

#myCanvas{
  background: rgb(140, 140, 227);
}

我的微信公众号： 梨的前端小屋