使用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>
Javascript 相关文章推荐
JavaScript中的其他对象
Jan 16 Javascript
JQuery AJAX实现目录浏览与编辑的代码
Oct 21 Javascript
Google Map API更新实现用户自定义标注坐标
Jul 29 Javascript
使用JavaScript switch case 另类写法
Mar 14 Javascript
JQuery 常用操作代码
Mar 14 Javascript
Js获取下拉框选定项的值和文本的实现代码
Feb 26 Javascript
jQuery实现网站添加高亮突出显示效果的方法
Jun 26 Javascript
angularjs表格ng-table使用备忘录
Mar 09 Javascript
vue实现列表的添加点击
Dec 29 Javascript
JS实现计算小于非负数n的素数的数量算法示例
Feb 26 Javascript
js实现带有动画的返回顶部
Aug 09 Javascript
Nuxt的路由动画效果案例
Nov 06 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
You might like
php&amp;mysql 日期操作小记
2012/02/27 PHP
PHP连接SQLServer2005的实现方法(附ntwdblib.dll下载)
2012/07/02 PHP
php实现的递归提成方案实例
2015/11/14 PHP
yii使用bootstrap分页样式的实例
2017/01/17 PHP
php解析非标准json、非规范json的方式实例
2020/12/10 PHP
JS request函数 用来获取url参数
2010/05/17 Javascript
Jquery获取和修改img的src值的方法
2014/02/17 Javascript
JavaScript 数组some()和filter()的用法及区别
2016/05/20 Javascript
炫酷的js手风琴效果
2016/10/13 Javascript
jQuery实现获取h1-h6标题元素值的方法
2017/03/06 Javascript
js+html5实现侧滑页面效果
2017/07/15 Javascript
微信小程序开发之好友列表字母列表跳转对应位置
2017/09/26 Javascript
angular6开发steps步骤条组件
2019/07/04 Javascript
详解Vue template 如何支持多个根结点
2020/02/10 Javascript
[00:30]明星选手化身超级英雄!2018DOTA2亚洲邀请赛全明星赛来临!
2018/04/06 DOTA
python构建深度神经网络(DNN)
2018/03/10 Python
Python神奇的内置函数locals的实例讲解
2019/02/22 Python
python3 线性回归验证方法
2019/07/09 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
flask利用flask-wtf验证上传的文件的方法
2020/01/17 Python
Python获取、格式化当前时间日期的方法
2020/02/10 Python
pytorch 实现在一个优化器中设置多个网络参数的例子
2020/02/20 Python
HTML+CSS3模拟心的跳动实例代码
2017/09/05 HTML / CSS
美国健康和保健平台:healtop
2020/07/02 全球购物
外科实习自我鉴定
2013/10/06 职场文书
工程监理应届生求职信
2013/11/09 职场文书
计算机应届毕业生自荐信范文
2014/02/23 职场文书
晨会主持词
2014/03/17 职场文书
《登鹳雀楼》教学反思
2014/04/09 职场文书
优秀学生评语大全
2014/04/25 职场文书
兴趣小组活动总结
2014/05/05 职场文书
投标邀请书范本
2015/02/02 职场文书
2015年保洁工作总结范文
2015/04/28 职场文书
公司员工手册范本
2015/05/14 职场文书
防溺水安全教育主题班会
2015/08/12 职场文书
交通安全学习心得体会
2016/01/18 职场文书