使用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 相关文章推荐
经验几则 推荐
Sep 05 Javascript
JQuery下的Live方法和$.browser方法使用代码
Jun 02 Javascript
javascript中的数字与字符串相加实例分析
Aug 14 Javascript
JavaScript基本编码模式小结
May 23 Javascript
html超链接打开窗口大小的方法
Mar 05 Javascript
jQuery实现网站添加高亮突出显示效果的方法
Jun 26 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
Dec 03 Javascript
KnockoutJs快速入门教程
May 16 Javascript
javascript之Boolean类型对象
Jun 07 Javascript
jquery做个日期选择适用于手机端示例
Jan 10 Javascript
ES6基础之数组和对象的拓展实例详解
Aug 22 Javascript
vue.js实现三级菜单效果
Oct 19 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
防止本地用户用fsockopen DDOS攻击对策
2011/11/02 PHP
PHP面向对象程序设计类的定义与用法简单示例
2016/12/27 PHP
Yii全局函数用法示例
2017/01/22 PHP
php创建图像具体步骤
2017/03/13 PHP
Yii框架参数化查询中IN查询只能查询一个的解决方法
2017/05/20 PHP
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
js 表单验证方法(实用)
2009/04/28 Javascript
对之前写的jquery分页做下升级
2014/06/19 Javascript
jQuery及JS实现循环中暂停的方法
2015/02/02 Javascript
JavaScript数组迭代器实例分析
2015/06/09 Javascript
ANGULARJS中使用JQUERY分页控件
2015/09/16 Javascript
WEB前端开发框架Bootstrap3 VS Foundation5
2016/05/16 Javascript
jQuery简单实现遍历单选框的方法
2017/03/06 Javascript
vue如何从接口请求数据
2017/06/22 Javascript
详解webpack多页面配置记录
2018/01/22 Javascript
js最实用string(字符串)类型的使用及截取与拼接详解
2019/04/26 Javascript
微信小程序前端promise封装代码实例
2019/08/24 Javascript
微信小程序HTTP请求从0到1封装
2019/09/09 Javascript
解决vue 表格table列求和的问题
2019/11/06 Javascript
JavaScript实现Tab选项卡切换
2020/02/13 Javascript
[58:29]DOTA2-DPC中国联赛 正赛 Phoenix vs XG BO3 第一场 1月31日
2021/03/11 DOTA
Python实现自动为照片添加日期并分类的方法
2017/09/30 Python
Python编程使用tkinter模块实现计算器软件完整代码示例
2017/11/29 Python
python如何统计序列中元素
2020/07/31 Python
pandas 读取各种格式文件的方法
2018/06/22 Python
pycharm重置设置,恢复默认设置的方法
2018/10/22 Python
python-OpenCV 实现将数组转换成灰度图和彩图
2020/01/09 Python
前端隐藏出边界内容的实现方法
2016/04/14 HTML / CSS
Carrs Silver官网:英国著名的银器品牌
2020/08/29 全球购物
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢? 是用==还是equals()? 它们有何区别?用contains来区分是否有重复的对象。还是都不用
2013/07/30 面试题
应届生污水处理求职信
2013/11/06 职场文书
教师师德反思材料
2014/02/15 职场文书
财会专业毕业生自荐信
2014/07/09 职场文书
党员“一帮一”活动总结
2015/05/07 职场文书
回复函范文
2015/07/14 职场文书
幼儿园2016圣诞节活动总结
2016/03/31 职场文书