使用js实现雪花飘落效果

网络编程 发布日期：2024/10/10 浏览次数：1

正在浏览：使用js实现雪花飘落效果
今天用html5绘布加js写的雪花飘效果 。分享下：
使用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" onclick="start()" />
  <br/>
  <canvas id="mycanvas" height="600px" width="600px" style="border: 3px solid blue"></canvas>
 </body>
</html>
上一篇：jQuery快速上手：写jQuery与直接写JS的区别详细解析
下一篇：JS预览图像将本地图片显示到浏览器上

一句话新闻

高通与谷歌联手！首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布，推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中，全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前，搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世，有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示，此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。