使用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 相关文章推荐
js文字滚动停顿效果代码
Jun 28 Javascript
JQuery 无废话系列教程(二) jquery实战篇上
Jun 23 Javascript
JavaScript与DropDownList 区别分析
Jan 01 Javascript
jQuery 表单验证扩展代码(一)
Oct 11 Javascript
使用JS取得焦点(focus)元素代码
Mar 22 Javascript
jQuery Mobile 触摸事件实例
Jun 04 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
Apr 10 jQuery
vue2.0 移动端实现下拉刷新和上拉加载更多的示例
Apr 23 Javascript
vue2.0实现音乐/视频播放进度条组件
Jun 06 Javascript
Vue中遍历数组的新方法实例详解
Jul 21 Javascript
Openlayers3实现车辆轨迹回放功能
Sep 29 Javascript
React如何使用axios请求数据并把数据渲染到组件
Aug 05 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
mysq GBKl乱码
2006/11/28 PHP
PHP+SQL 注入攻击的技术实现以及预防办法
2011/01/27 PHP
PHP防CC攻击实现代码
2011/12/29 PHP
2个比较经典的PHP加密解密函数分享
2014/07/01 PHP
PHP JSON出错:Cannot use object of type stdClass as array解决方法
2014/08/16 PHP
6个超实用的PHP代码片段
2015/08/10 PHP
[原创]ThinkPHP让../Public在模板不解析(直接输出)的方法
2015/10/09 PHP
PHP中header用法小结
2016/05/23 PHP
PDO::rollBack讲解
2019/01/29 PHP
javascript编程起步(第二课)
2007/02/27 Javascript
如何阻止复制剪切和粘贴事件为了表单内容的安全
2013/05/23 Javascript
js 动态修改css文件的方法
2014/08/05 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
2016/06/08 Javascript
微信JS接口大全
2016/08/25 Javascript
vue2.0 下拉框默认标题设置方法
2018/08/22 Javascript
详解JavaScript事件循环机制
2018/09/07 Javascript
Node.js Stream ondata触发时机与顺序的探索
2019/03/08 Javascript
Node 代理访问的实现
2019/09/19 Javascript
JavaScript实现电灯开关小案例
2020/03/30 Javascript
[04:22]DOTA2大事件之护国神翼
2020/08/14 DOTA
举例讲解Python中的Null模式与桥接模式编程
2016/02/02 Python
详解python开发环境搭建
2016/12/16 Python
用python简单实现mysql数据同步到ElasticSearch的教程
2018/05/30 Python
Python清空文件并替换内容的实例
2018/10/22 Python
python引入不同文件夹下的自定义模块方法
2018/10/27 Python
Python中的集合介绍
2019/01/28 Python
python3 打印输出字典中特定的某个key的方法示例
2019/07/06 Python
python 爬取古诗文存入mysql数据库的方法
2020/01/08 Python
RetroStage德国:复古服装
2019/02/03 全球购物
加拿大在线旅游公司:Flighthub
2019/03/11 全球购物
新西兰最大、占有率最高的综合性药房:PharmacyDirect药房中文网
2020/11/03 全球购物
优秀应届毕业生自荐信
2013/11/16 职场文书
毕业班联欢会主持词
2014/03/27 职场文书
财务个人年度总结范文
2015/02/26 职场文书
2015年度公共机构节能工作总结
2015/05/26 职场文书
2015年秋季运动会广播稿
2015/08/19 职场文书