编程 Javascript

使用js实现雪花飘落效果

Posted in Javascript onAugust 26, 2013

今天用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>

使用js实现雪花飘落效果

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JavaScript中使用replace结合正则实现replaceAll的效果

Jun 04 Javascript

JavaScript如何实现在文本框(密码框)输入提示语

Dec 25 Javascript

JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日格式的代码

Jul 27 Javascript

jquery把int类型转换成字符串类型的方法

Oct 07 Javascript

Java与JavaScript中判断两字符串是否相等的区别

Mar 13 Javascript

微信小程序封装http访问网络库实例代码

May 24 Javascript

详解angularjs实现echart图表效果最简洁教程

Nov 29 Javascript

bootstrap模态框弹出和隐藏,动态改变中间内容的实例

Aug 10 Javascript

关于layui 实现点击按钮添加一行(方法渲染创建的table)

Sep 29 Javascript

vue中使用vue-print.js实现多页打印

Mar 05 Javascript

基于leaflet.js实现修改地图主题样式的流程分析

May 15 Javascript

解决vue单页面回退页面 keeplive 缓存问题

Jul 22 Javascript

JS预览图像将本地图片显示到浏览器上

Aug 25 #Javascript

点击弹出层外区域关闭弹出层jquery特效示例

Aug 25 #Javascript

jquery cookie实现的简单换肤功能适合小网站

Aug 25 #Javascript

javascript jq 弹出层实例

Aug 25 #Javascript

jQuery选择器中含有空格的使用示例及注意事项

Aug 25 #Javascript

JS操作JSON要领详细总结

Aug 25 #Javascript

JS 两个字符串时间的天数差计算

Aug 25 #Javascript