使用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 MD4
Dec 20 Javascript
Knockout text绑定DOM的使用方法
Nov 15 Javascript
javascript教程:关于if简写语句优化的方法
May 17 Javascript
原生js实现模拟滚动条
Jun 15 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
Feb 16 Javascript
AngularJS读取JSON及XML文件的方法示例
May 25 Javascript
Vue AST源码解析第一篇
Jul 19 Javascript
深入掌握 react的 setState的工作机制
Sep 27 Javascript
浅谈vue,angular,react数据双向绑定原理分析
Nov 28 Javascript
python实现迭代法求方程组的根过程解析
Nov 25 Javascript
详解微信小程序之提高应用速度小技巧
Jan 07 Javascript
vue-element-admin项目导入和导出的实现
May 21 Vue.js
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
苏联队长,苏联超人蝙蝠侠,这些登场的“山寨”英雄真的很严肃
2020/04/09 欧美动漫
如何使用PHP中的字符串函数
2006/10/09 PHP
用PHP写的MySQL数据库用户认证系统代码
2007/03/22 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(七)
2014/06/23 PHP
php实现在服务器上创建目录的方法
2015/03/16 PHP
PHP查找数值数组中不重复最大和最小的10个数的方法
2015/04/20 PHP
php实现和c#一致的DES加密解密实例
2017/07/24 PHP
PHP解析url并得到url参数方法总结
2018/10/11 PHP
javaScript对象和属性的创建方法
2007/01/15 Javascript
jquery 滚动条事件简单实例
2013/07/12 Javascript
js string 转 int 注意的问题小结
2013/08/15 Javascript
javascript 动态创建表格的2种方法总结
2015/03/04 Javascript
javascript精确统计网站访问量实例代码
2015/12/19 Javascript
Angularjs中UI Router的使用方法
2016/05/14 Javascript
AngularJS基础 ng-keydown 指令简单示例
2016/08/02 Javascript
BootStrap入门教程(三)之响应式原理
2016/09/19 Javascript
前端开发必知的15个jQuery小技巧
2017/01/22 Javascript
Webpack实现按需打包Lodash的几种方法详解
2017/05/08 Javascript
JavaScript中的全局属性与方法深入解析
2020/06/14 Javascript
nuxt 自定义 auth 中间件实现令牌的持久化操作
2020/11/05 Javascript
Python警察与小偷的实现之一客户端与服务端通信实例
2014/10/09 Python
实践Python的爬虫框架Scrapy来抓取豆瓣电影TOP250
2016/01/20 Python
python中import学习备忘笔记
2017/01/24 Python
一个基于flask的web应用诞生(1)
2017/04/11 Python
python Pygame的具体使用讲解
2017/11/03 Python
Python向excel中写入数据的方法
2019/05/05 Python
Python运行提示缺少模块问题解决方案
2020/04/02 Python
HTML5的download属性详细介绍和使用实例
2014/04/23 HTML / CSS
迪拜航空官方网站:flydubai
2017/04/20 全球购物
Johnston & Murphy官网: 约翰斯顿·墨菲牛津总统鞋
2018/01/09 全球购物
办公室员工岗位工作职责
2014/03/10 职场文书
护士医德考评自我评价
2015/03/03 职场文书
2015秋学期开学寄语
2015/05/28 职场文书
安全教育主题班会教案
2015/08/12 职场文书
低门槛开发iOS、Android、小程序应用的前端框架详解
2021/10/16 Javascript
python调用ffmpeg命令行工具便捷操作视频示例实现过程
2021/11/01 Python