使用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 相关文章推荐
超级强大的表单验证
Jun 26 Javascript
javascript动画对象支持加速、减速、缓入、缓出的实现代码
Sep 30 Javascript
js获取指定日期周数以及星期几的小例子
Jun 27 Javascript
Node.js编码规范
Jul 14 Javascript
JavaScript Serializer序列化时间处理示例
Jul 31 Javascript
jQuery+CSS3实现树叶飘落特效
Feb 01 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
Mar 19 Javascript
Jquery日历插件制作简单日历
Oct 28 Javascript
Boostrap基础教程之JavaScript插件篇
Sep 08 Javascript
AngularJS 模块化详解及实例代码
Sep 14 Javascript
微信小程序实现锚点功能
Nov 20 Javascript
VSCode搭建React Native环境
May 07 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
星际争霸任务指南——神族
2020/03/04 星际争霸
收听困难?教您超简便短波广播抗干扰方法!
2021/03/01 无线电
PHP 遍历文件实现代码
2011/05/04 PHP
PHP闭包实例解析
2014/09/08 PHP
php单一接口的实现方法
2015/06/20 PHP
php中类和对象:静态属性、静态方法
2017/04/09 PHP
PHP JWT初识及其简单示例
2018/10/10 PHP
php过滤htmlspecialchars() 函数实现把预定义的字符转换为 HTML 实体用法分析
2019/06/25 PHP
PHP常用函数之格式化时间操作示例
2019/10/21 PHP
让您的菜单不离网站
2006/10/03 Javascript
JavaScript 继承详解(三)
2009/07/13 Javascript
js当一个变量为函数时 应该注意的一点细节小结
2011/12/29 Javascript
JQuery中基础过滤选择器用法实例分析
2015/05/18 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
详解Angular 4 表单快速入门
2017/06/05 Javascript
JavaScript实现跟随滚动缓冲运动广告框
2017/07/15 Javascript
Webpack 4.x搭建react开发环境的方法步骤
2018/08/15 Javascript
七行JSON代码把你的网站变成移动应用过程详解
2019/07/09 Javascript
[01:00:11]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第一场 2月7日
2021/03/11 DOTA
python判断字符串编码的简单实现方法(使用chardet)
2016/07/01 Python
python使用pycharm环境调用opencv库
2018/02/11 Python
django允许外部访问的实例讲解
2018/05/14 Python
利用Django模版生成树状结构实例代码
2019/05/19 Python
python进程池实现的多进程文件夹copy器完整示例
2019/11/27 Python
python操作ini类型配置文件的实例教程
2020/10/30 Python
Python 调用C++封装的进一步探索交流
2021/03/04 Python
css3一个简易的 LED 数字时钟实现方法
2020/01/15 HTML / CSS
Fossil美国官网:Fossil手表、手袋、珠宝及配件
2017/02/01 全球购物
欧洲领先的火车票和大巴票预订平台:Trainline
2018/12/26 全球购物
设计4个线程,其中两个线程每次对j增加1,另外两个线程对j每次减少1。写出程序。
2014/12/30 面试题
文秘大学生求职信
2014/02/25 职场文书
教师查摆问题及整改措施
2014/10/11 职场文书
背起爸爸上学观后感
2015/06/08 职场文书
夏洛特的网观后感
2015/06/15 职场文书
高考要来啦!用Python爬取历年高考数据并分析
2021/06/03 Python
tomcat的catalina.out日志按自定义时间格式进行分割的操作方法
2022/04/02 Servers