使用js实现雪花飘落效果

更新时间：2013年08月26日 09:13:13 作者：

以下是对使用js实现雪花飘落的效果进行了介绍。需要的朋友可以过来参考下

今天用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" onclick="start()" />
  <br/>
  <canvas id="mycanvas" height="600px" width="600px" style="border: 3px solid blue"></canvas>
 </body>
</html>

您可能感兴趣的文章:

javascript容错处理代码(屏蔽js错误)
本文主要介绍了javascript的容错处理代码。具有一定的参考价值，下面跟着小编一起来看下吧
2017-01-01
Js获取单选框radio的几种方式
这篇文章主要介绍了Js获取单选框radio的几种方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-12-12
关于JS通过google翻译插件实现多语言版本
这篇文章主要介绍了JS通过google翻译插件实现多语言版本,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-06-06
ES6记录异步函数的执行时间详解
在这篇文章里，我会实现一个可重用的函数来处理 JavaScript 延时异步操作。有需要的小伙伴们可以参考借鉴，下面来一起看看。
2016-08-08
bootstrap输入框组件使用方法详解
这篇文章主要为大家详细介绍了bootstrap输入框组件使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-01-01
JavaScript事件机制的剖析与优化详解
在现代前端开发中,JavaScript事件处理是一个至关重要的部分,它能够使网页与用户交互,实现丰富的交互体验,然而,对JavaScript事件机制的深入理解是开发者成为优秀前端工程师的关键所在,本文将全面剖析JavaScript事件机制,需要的朋友可以参考下
2023-12-12
基于js实现的限制文本框只可以输入数字
本文主要介绍了js限制文本框只可以输入数字的实例代码，可复制直接调用函数实现其功能。需要的朋友可以看下
2016-12-12
js实时获取窗口大小变化的实例代码
下面小编就为大家带来一篇js实时获取窗口大小变化的实例代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-11-11
H5唤醒APP实现方法及注意点总结
目前通过H5页面唤起App的场景十分常见,比如常见的分享功能,这篇文章主要给大家介绍了关于H5唤醒APP实现方法及注意点的相关资料,需要的朋友可以参考下
2021-06-06
JavaScript转换农历类实现及调用方法
农历是日常生活中不可或缺的一部分，它与人类的生活息息相关，从某种程度上说，它一直伴随着我们，今天的任务是JavaScript转换农历类的实现，感兴趣的你可以千万不要错过，希望本文对你有所帮助
2013-01-01