使用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 相关文章推荐
JScript的条件编译
May 29 Javascript
raphael.js绘制中国地图 地图绘制方法
Feb 12 Javascript
jquery实现一个简单的表单验证实例
Mar 30 Javascript
String字符串截取的四种方式总结
Nov 28 Javascript
jQuery网页定位导航特效实现方法
Dec 19 Javascript
jQuery实现限制文本框的输入长度
Jan 11 Javascript
JS数组操作之增删改查的简单实现
Aug 21 Javascript
Web技术实现移动监测的介绍
Sep 18 Javascript
node和vue实现商城用户地址模块
Dec 05 Javascript
微信小程序日历弹窗选择器代码实例
May 09 Javascript
JavaScript实现图片轮播特效
Oct 23 Javascript
selenium+java中用js来完成日期的修改
Oct 31 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中使用Sockets 从Usenet中获取文件
2008/01/10 PHP
有关PHP中MVC的开发经验分享
2012/05/17 PHP
分享8个最佳的代码片段在线测试网站
2013/06/29 PHP
Linux下PHP安装mcrypt扩展模块笔记
2014/09/10 PHP
php按字符无乱码截取中文的方法
2015/03/27 PHP
php+mysql实现无限级分类
2015/11/11 PHP
yii权限控制的方法(三种方法)
2015/12/28 PHP
yii2-GridView在开发中常用的功能及技巧总结
2017/01/07 PHP
jquery控制左右箭头滚动图片列表的实例
2013/05/20 Javascript
jQuery实现延迟跳转的方法
2015/06/05 Javascript
jQuery+ajax读取并解析XML文件的方法
2016/09/09 Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
2017/03/04 Javascript
浅谈Vue.js 1.x 和 2.x 实例的生命周期
2017/07/25 Javascript
react router 4.0以上的路由应用详解
2017/09/21 Javascript
微信小程序实现炫酷的弹出式菜单特效
2019/01/28 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
[03:57]《不朽》——2015DOTA2国际邀请赛—中国军团出征主题曲MV
2015/07/15 DOTA
在Python的Flask中使用WTForms表单框架的基础教程
2016/06/07 Python
python的pdb调试命令的命令整理及实例
2017/07/12 Python
聊聊Python中的pypy
2018/01/12 Python
numpy使用技巧之数组过滤实例代码
2018/02/03 Python
Python SQLite3简介
2018/02/22 Python
Python 实现自动导入缺失的库
2019/10/29 Python
详解Python中list[::-1]的几种用法
2020/11/16 Python
Python Pandas list列表数据列拆分成多行的方法实现
2020/12/14 Python
html5模拟平抛运动(模拟小球平抛运动过程)
2013/07/25 HTML / CSS
美国校服网上商店:French Toast
2019/10/08 全球购物
亚洲颇具影响力的男性在线购物零售商:His
2019/11/24 全球购物
abstract 可以和 virtual 一起使用吗?可以和 override 一起使用吗?
2012/10/15 面试题
护理不良事件检讨书
2014/02/06 职场文书
2014年党员公开承诺践诺书
2014/03/25 职场文书
小学老师寄语大全
2014/04/04 职场文书
村庄绿化方案
2014/05/07 职场文书
讲文明树新风演讲稿
2014/05/12 职场文书
大专生自荐书范文
2014/06/22 职场文书
阿甘正传观后感
2015/06/01 职场文书