使用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 相关文章推荐
Javascript类库的顶层对象名用户体验分析
Oct 24 Javascript
JS验证日期的格式YYYY-mm-dd 具体实现
Jun 29 Javascript
document.documentElement和document.body区别介绍
Sep 16 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
Feb 04 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
Nov 07 Javascript
基于JS2Image实现圣诞树代码
Dec 24 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
Jan 26 Javascript
javascript的 {} 语句块详解
Feb 27 Javascript
CSS3 media queries结合jQuery实现响应式导航
Sep 30 Javascript
BootStrap模态框不垂直居中的解决方法
Oct 19 Javascript
JS实现将链接生成二维码并转为图片的方法
Mar 17 Javascript
vue递归实现树形组件
Jul 15 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
异世界新番又来了,同样是从零开始,男主的年龄降到5岁
2020/04/09 日漫
修改了一个很不错的php验证码(支持中文)
2007/02/14 PHP
PHP控制网页过期时间的代码
2008/09/28 PHP
laravel 5 实现模板主题功能(续)
2015/03/02 PHP
PHP SPL标准库之SplFixedArray使用实例
2015/05/12 PHP
thinkphp在php7环境下提示Cannot use ‘String’ as class name as it is reserved的解决方法
2016/09/30 PHP
将函数的实际参数转换成数组的方法
2010/01/25 Javascript
seajs中模块的解析规则详解和模块使用总结
2014/03/12 Javascript
用js读、写、删除Cookie代码续篇
2014/12/03 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
2015/01/05 Javascript
js正则表达式匹配数字字母下划线等
2015/04/14 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
2016/10/21 Javascript
javascript监听页面刷新和页面关闭事件方法详解
2017/01/09 Javascript
Bootstrap导航条学习使用(一)
2017/02/08 Javascript
浅析 NodeJs 的几种文件路径
2017/06/07 NodeJs
Vue非父子组件通信详解
2017/06/12 Javascript
详解各版本React路由的跳转的方法
2018/05/10 Javascript
详解vue中axios的封装
2018/07/18 Javascript
LayUI表格批量删除方法
2018/08/15 Javascript
js 实现watch监听数据变化的代码
2019/10/13 Javascript
原生javascript单例模式的应用实例分析
2020/02/23 Javascript
vue实现购物车加减
2020/05/30 Javascript
antd-日历组件,前后禁止选择,只能选中间一部分的实例
2020/10/29 Javascript
[01:07]DOTA2次级职业联赛 - Fpb战队宣传片
2014/12/01 DOTA
Linux中安装Python的交互式解释器IPython的教程
2016/06/13 Python
python中set()函数简介及实例解析
2018/01/09 Python
python使用PIL实现多张图片垂直合并
2019/01/15 Python
基于腾讯云服务器部署微信小程序后台服务(Python+Django)
2019/05/08 Python
python对输出的奇数偶数排序实例代码
2020/12/04 Python
CSS3实现大小不一的粒子旋转加载动画
2016/04/21 HTML / CSS
法人授权委托书
2014/04/03 职场文书
2014年幼师工作总结
2014/11/22 职场文书
怎样写离婚协议书
2015/01/26 职场文书
2015年见习期个人工作总结
2015/05/28 职场文书
工作汇报材料难写?方法都在这里了!
2019/07/01 职场文书
Mysql 文件配置解析介绍
2022/05/06 MySQL