雪花飘

最新推荐文章于 2022-12-28 13:21:52 发布

o流云oO

最新推荐文章于 2022-12-28 13:21:52 发布

阅读量1.1k

点赞数 3

分类专栏： html5 文章标签： html5绘布 js

本文链接：https://blog.csdn.net/ooliuyunoo/article/details/9388699

版权

html5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

今天用html5绘布加js写的雪花飘效果。分享下：

<html>
  <head>
   <script>
    
    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" οnclick="start()" />
   <br/>
   <canvas id="mycanvas" height="600px" width="600px" style="border: 3px solid blue"></canvas>
  </body>
 
</html>