下雪的效果

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="chrome=1">
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }

   
  </style>
</head>

<body>
  <canvas id="canvas" width="1500px" height="900px" style="border:1px solid black;background:black"></canvas>

  <script type="text/javascript">
      var canvas=document.getElementById("canvas");
      var ctx=canvas.getContext("2d");
      var width=canvas.width;
      var height=canvas.height;
    

      function Qiu(ctx,x,y){
        this.ctx=ctx;
          this.x=x;
          this.y=y;
          this.speedX=Math.random()*4-2;
          this.speedY=-1;
          this.zhongli=0.1;
          this.banjing=5;
          this.color=createColor()
        this.draw()
      }
      Qiu.prototype.draw=function(){
        this.ctx.beginPath();
        this.ctx.fillStyle=this.color;
        this.ctx.arc(this.x,this.y,this.banjing,0,2*Math.PI,false);
        this.ctx.fill();
      }
      Qiu.prototype.update=function(){
        this.x+=this.speedX;

        this.speedY+=this.zhongli;
      

        this.y+=this.speedY

        this.banjing-=0.03;
        if(this.banjing<1){
          this.banjing=1
        }
       
          
        
        
        this.draw()
      }
      var arr=[]
      var img =new Image()
      img.src="./4.png"
      img.onload = function () {
     setInterval(() => {
      ctx.clearRect(0,0,width,height)
    
     
        ctx.drawImage(img,500,130,300,500);
          
      
    
      var qiu= new Qiu(ctx,width*Math.random(),0);
      var qiu1= new Qiu(ctx,width*Math.random(),0);
    
      for(var i=0;i<arr.length;i++){
        arr[i].update()
      }
      arr.push(qiu);
      arr.push(qiu1);
      if(arr.length>300){
        arr.shift()
      }
      //console.log(arr.length)
     
     }, 15);
    };
     function createColor(){
      return "white";
       return "rgb("+Math.floor(Math.random()*200)+","+Math.floor(Math.random()*200)+","+Math.floor(Math.random()*200)+")";
     }
   
  </script>
</body >

</html>
posted @ 2020-05-26 18:41  刘浩2561179983  阅读(151)  评论(0)  编辑  收藏  举报