使用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 cookie中文乱码解决方法
Jan 28 Javascript
Angularjs整合微信UI(weui)
Mar 15 Javascript
简述Matlab中size()函数的用法
Mar 20 Javascript
webpack实现热更新(实施同步刷新)
Jul 28 Javascript
在 Node.js 中使用原生 ES 模块方法解析
Sep 19 Javascript
VueJs使用Amaze ui调整列表和内容页面
Nov 30 Javascript
vue 项目常用加载器及配置详解
Jan 22 Javascript
一个Vue页面的内存泄露分析详解
Jun 25 Javascript
ES6 class的应用实例分析
Jun 27 Javascript
JS apply用法总结和使用场景实例分析
Mar 14 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
Jul 15 Javascript
vue+Element-ui实现登录注册表单
Nov 17 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
linux下删除7天前日志的代码(php+shell)
2011/01/02 PHP
PHP文件大小格式化函数合集
2014/03/10 PHP
PHP制作百度词典查词采集器
2015/01/29 PHP
php实现购物车功能(上)
2020/07/23 PHP
thinkPHP实现的联动菜单功能详解
2017/05/05 PHP
PHP基于swoole多进程操作示例
2019/08/12 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
tbody元素支持嵌套的注意方法
2007/03/24 Javascript
JavaScript获得选中文本内容的方法
2008/12/02 Javascript
Javascript load Page,load css,load js实现代码
2010/03/31 Javascript
jQuery三级下拉列表导航菜单代码分享
2020/04/15 Javascript
谈谈impress.js初步理解
2015/09/09 Javascript
学做Bootstrap的第一个页面
2016/05/15 HTML / CSS
JS中script标签defer和async属性的区别详解
2016/08/12 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
2016/11/21 Javascript
JavaScript中in和hasOwnProperty区别详解
2017/08/04 Javascript
Vue项目数据动态过滤实践及实现思路
2018/09/11 Javascript
Javascript 实现 Excel 导入生成图表功能
2018/10/22 Javascript
通过cordova将vue项目打包为webapp的方法
2019/02/02 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
2020/04/29 Javascript
为Python的web框架编写MVC配置来使其运行的教程
2015/04/30 Python
编写Python爬虫抓取豆瓣电影TOP100及用户头像的方法
2016/01/20 Python
Python3 中文文件读写方法
2018/01/23 Python
Python实现确认字符串是否包含指定字符串的实例
2018/05/02 Python
python切片的步进、添加、连接简单操作示例
2019/07/11 Python
python分布式编程实现过程解析
2019/11/08 Python
Python3 socket即时通讯脚本实现代码实例(threading多线程)
2020/06/01 Python
python爬虫把url链接编码成gbk2312格式过程解析
2020/06/08 Python
Python matplotlib模块及柱状图用法解析
2020/08/10 Python
python 爬虫网页登陆的简单实现
2020/11/30 Python
CSS3使用border-radius属性制作圆角
2014/12/22 HTML / CSS
Cole Haan官方网站:美国时尚潮流品牌
2017/12/06 全球购物
一套Delphi的笔试题二
2013/05/11 面试题
户外拓展活动方案
2014/02/11 职场文书
医学生就业推荐表自我鉴定
2014/03/26 职场文书
Kubernetes控制节点的部署
2022/04/01 Servers