使用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 相关文章推荐
JQuery记住用户名和密码的具体实现
Apr 04 Javascript
JavaScript获取图片真实大小代码实例
Sep 24 Javascript
JavaScript使用Replace进行字符串替换的方法
Apr 14 Javascript
jQuery实现为LI列表前3行设置样式的方法【2种方法】
Sep 04 Javascript
深入理解requestAnimationFrame的动画循环
Sep 20 Javascript
jQuery的Read()方法代替原生JS详解
Nov 08 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
Dec 02 Javascript
Node.js log4js日志管理详解
Jul 31 Javascript
详解小程序rich-text对富文本支持方案
Nov 28 Javascript
微信小程序在地图选择地址并返回经纬度简单示例
Dec 03 Javascript
vue elementUI使用tabs与导航栏联动
Jun 21 Javascript
Typescript类型系统FLOW静态检查基本规范
May 25 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
PHP判断表单复选框选中状态完整例子
2014/06/24 PHP
用 Composer构建自己的 PHP 框架之设计 MVC
2014/10/30 PHP
用javascript实现画板的代码
2007/09/05 Javascript
JQuery 自定义CircleAnimation,Animate方法学习笔记
2011/07/10 Javascript
JS性能优化笔记搜索整理
2013/08/21 Javascript
jquery实现文本框数量加减功能的例子分享
2014/05/10 Javascript
JavaScript实现的简单烟花特效代码
2015/10/20 Javascript
jQuery动态添加
2016/04/07 Javascript
js传值后台中文出现乱码的解决方法
2016/06/30 Javascript
15位和18位身份证JS校验的简单实例
2016/07/18 Javascript
thinkjs 文件上传功能实例代码
2017/11/08 Javascript
最后说说Vue2 SSR 的 Cookies 问题
2018/05/25 Javascript
JS实现的简单分页功能示例
2018/08/23 Javascript
在Vue 中使用Typescript的示例代码
2018/09/10 Javascript
浅谈layui里的上传控件问题
2019/09/26 Javascript
webpack 动态批量加载文件的实现方法
2020/03/19 Javascript
[01:32]DOTA2上海特锦赛现场采访:最想COS的英雄
2016/03/25 DOTA
Python实现的选择排序算法示例
2017/11/29 Python
python中pylint使用方法(pylint代码检查)
2018/04/06 Python
python 列表递归求和、计数、求最大元素的实例
2018/11/28 Python
Python3爬虫教程之利用Python实现发送天气预报邮件
2018/12/16 Python
TIME时代杂志台湾总代理:台时亚洲
2018/10/22 全球购物
Ajax请求总共有多少种Callback
2016/07/17 面试题
设计总监岗位职责
2013/12/07 职场文书
大课间活动制度
2014/01/18 职场文书
工商局副局长个人对照检查材料
2014/09/25 职场文书
幼儿园校园小喇叭广播稿
2014/10/17 职场文书
实训报告范文大全
2014/11/04 职场文书
2014年纪检部工作总结
2014/11/12 职场文书
房屋买卖协议样本
2014/11/16 职场文书
夫妻双方自愿离婚协议书怎么写
2014/12/01 职场文书
宣传稿格式范文
2015/07/23 职场文书
2016年记者节感言
2015/12/08 职场文书
学习党章心得体会2016
2016/01/15 职场文书
观看《信仰》心得体会
2016/01/15 职场文书
python对文档中元素删除,替换操作
2022/04/02 Python