使用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 相关文章推荐
js 操作符实例代码
Oct 24 Javascript
基于jquery自己写tab滑动门(通用版)
Oct 30 Javascript
JS判断字符串包含的方法
May 05 Javascript
详解js跨域原理以及2种解决方案
Dec 09 Javascript
JavaScript 中 avalon绑定属性总结
Oct 19 Javascript
原生JS实现幻灯片
Feb 22 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
Feb 10 Javascript
通过实例解析JavaScript for in及for of区别
Jun 15 Javascript
解决vue-router路由拦截造成死循环问题
Aug 05 Javascript
AngularJs的$http发送POST请求,php无法接收Post的数据问题及解决方案
Aug 13 Javascript
vue 使用lodash实现对象数组深拷贝操作
Sep 10 Javascript
JavaScript实现网页留言板功能
Nov 23 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
php5 apache 2.2 webservice 创建与配置(java)
2011/01/27 PHP
PHP动态分页函数,PHP开发分页必备啦
2011/11/07 PHP
php中convert_uuencode()与convert_uuencode函数用法实例
2014/11/22 PHP
PHP文件上传小程序 适合初学者学习!
2019/05/23 PHP
一些常用的JS功能函数代码
2009/06/23 Javascript
jQuery关于导航条背景切换效果实现示例
2013/09/04 Javascript
再谈Jquery Ajax方法传递到action(补充)
2014/05/12 Javascript
Node.js 去掉种子(torrent)文件里的邪恶信息
2015/03/27 Javascript
原生js实现类似弹窗抖动效果
2015/04/02 Javascript
JS两个数组比较,删除重复值的巧妙方法(推荐)
2016/06/03 Javascript
BootStrap无限级分类(无限极分类封装版)
2016/08/26 Javascript
详解handlebars+require基本使用方法
2016/12/21 Javascript
React Native 集成jpush-react-native的示例代码
2017/08/16 Javascript
使用watch监听路由变化和watch监听对象的实例
2018/02/24 Javascript
JavaScript数据结构与算法之二叉树实现查找最小值、最大值、给定值算法示例
2019/03/01 Javascript
记录一次开发微信网页分享的步骤
2019/05/07 Javascript
Nuxt使用Vuex的方法示例
2019/09/06 Javascript
jQuery实现移动端下拉展现新的内容回弹动画
2020/06/24 jQuery
python实现红包裂变算法
2016/02/16 Python
Python Requests 基础入门
2016/04/07 Python
解决pyinstaller打包exe文件出现命令窗口一闪而过的问题
2018/10/31 Python
详解Python3 对象组合zip()和回退方式*zip
2019/05/15 Python
Python 日志logging模块用法简单示例
2019/10/18 Python
Python中logger日志模块详解
2020/08/04 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
HTML5 Web Workers之网站也能多线程的实现
2013/04/24 HTML / CSS
俄罗斯金苹果网上化妆品和香水商店:Goldapple
2019/12/01 全球购物
小米俄罗斯授权商店:Xiaomi俄罗斯
2019/12/08 全球购物
模具设计与制造专业求职信
2014/07/19 职场文书
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
公司合作协议范文
2014/10/01 职场文书
2014村书记党建工作汇报材料
2014/11/02 职场文书
2015年英语教学工作总结
2015/05/25 职场文书
党支部鉴定意见
2015/06/02 职场文书
首次购房证明
2015/06/19 职场文书
SQL注入的实现以及防范示例详解
2021/06/02 MySQL