使用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 相关文章推荐
extjs grid取到数据而不显示的解决
Dec 29 Javascript
JavaScript的变量作用域深入理解
Oct 25 Javascript
jQuery的三种$()
Dec 30 Javascript
jquery 简单应用示例总结
Aug 09 Javascript
Javascript解析URL方法详解
Dec 05 Javascript
js插件设置innerHTML时在IE8下提示“未知运行时错误”解决方法
Apr 25 Javascript
详解JavaScript中的构造器Constructor模式
Jan 14 Javascript
js实现的简练高效拖拽功能示例
Dec 21 Javascript
使用javascript函数编写简单银行取钱存钱流程
May 26 Javascript
vue 表单输入格式化中文输入法异常问题
May 30 Javascript
详解JavaScript中的this指向问题
Feb 05 Javascript
vue基于Teleport实现Modal组件
May 31 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
将数组写入txt文件 var_export
2009/04/21 PHP
php 下载保存文件保存到本地的两种实现方法
2013/08/12 PHP
php格式化时间戳
2016/12/17 PHP
php fread函数使用方法总结
2019/05/28 PHP
JS event使用方法详解
2008/04/28 Javascript
学习ExtJS Window常用方法
2009/10/07 Javascript
Javascript 自定义类型方法小结
2010/03/02 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
2012/03/01 Javascript
javascript新闻跑马灯实例代码
2020/07/29 Javascript
JavaScript接口的实现三种方式(推荐)
2016/06/14 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
2017/01/19 Javascript
import与export在node.js中的使用详解
2017/09/28 Javascript
解析Angular 2+ 样式绑定方式
2018/01/15 Javascript
Node.js实现注册邮箱激活功能的方法示例
2018/03/23 Javascript
vue+iview/elementUi实现城市多选
2019/03/28 Javascript
express + jwt + postMan验证实现持久化登录
2019/06/05 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
2020/10/29 Javascript
Pyhton中单行和多行注释的使用方法及规范
2016/10/11 Python
浅析python递归函数和河内塔问题
2017/04/18 Python
Python算法之图的遍历
2017/11/16 Python
PyQt5实现简易电子词典
2019/06/25 Python
详解用python生成随机数的几种方法
2019/08/04 Python
使用pygame写一个古诗词填空通关游戏
2019/12/03 Python
Python实现图片识别加翻译功能
2019/12/26 Python
Python属性和内建属性实例解析
2020/01/14 Python
python实现猜拳游戏
2020/03/04 Python
python多进程下的生产者和消费者模型
2020/05/07 Python
如何在keras中添加自己的优化器(如adam等)
2020/06/19 Python
党员承诺践诺书
2014/05/20 职场文书
阅兵口号
2014/06/19 职场文书
售后服务承诺函格式
2015/01/21 职场文书
涨价通知
2015/04/23 职场文书
校园环境卫生倡议书
2015/04/29 职场文书
Python 实现绘制子图及子图刻度的变换等问题
2021/05/31 Python
html+css实现环绕倒影加载特效
2021/07/07 HTML / CSS
maven 解包依赖项中的文件的解决方法
2022/07/15 Java/Android