使用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代码和jquery对比体会
Sep 10 Javascript
同域jQuery(跨)iframe操作DOM(示例代码)
Dec 13 Javascript
js的隐含参数(arguments,callee,caller)使用方法
Jan 28 Javascript
JQuery实现防止退格键返回的方法
Feb 12 Javascript
JavaScript实现简单图片翻转的方法
Apr 17 Javascript
vue表单绑定实现多选框和下拉列表的实例
Aug 12 Javascript
angular内置provider之$compileProvider详解
Sep 27 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
Dec 22 Javascript
React之PureComponent的使用作用
Jul 10 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
Oct 20 Javascript
JavaScript array常用方法代码实例详解
Sep 02 Javascript
三种方式清除vue路由跳转router-link的历史记录
Apr 10 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
PHP的微信支付接口使用方法讲解
2019/03/08 PHP
PHP7内核CGI与FastCGI详解
2019/04/14 PHP
phpStudy vscode 搭建debug调试的教程详解
2020/07/28 PHP
js跨域和ajax 跨域问题的实现思路
2009/09/05 Javascript
33种Javascript 表格排序控件收集
2009/12/03 Javascript
Jquery实现网页跳转或用命令打开指定网页的解决方法
2013/07/09 Javascript
JQuery判断子iframe何时加载完成解决方案
2013/08/20 Javascript
jquery实现动态菜单的实例代码
2013/11/28 Javascript
JQuery日历插件My97DatePicker日期范围限制
2016/01/20 Javascript
JS克隆,属性,数组,对象,函数实例分析
2016/11/26 Javascript
简单实现jquery焦点图
2016/12/12 Javascript
详解angular中如何监控dom渲染完毕
2017/01/03 Javascript
JS实现旋转木马式图片轮播效果
2017/01/18 Javascript
jQuery图片轮播功能实例代码
2017/01/29 Javascript
JavaScript实现读取与输出XML文件数据的方法示例
2018/06/05 Javascript
layui实现下拉复选功能的例子(包括数据的回显与上传)
2019/09/24 Javascript
Vue触发input选取文件点击事件操作
2020/08/07 Javascript
jQuery实现异步上传一个或多个文件
2020/08/17 jQuery
[03:07]DOTA2英雄基础教程 冰霜诅咒极寒幽魂
2013/12/06 DOTA
[04:00]黄浦江畔,再会英雄——完美世界DOTA2 TI9应援视频
2019/07/31 DOTA
简单理解Python中基于生成器的状态机
2015/04/13 Python
python批量添加zabbix Screens的两个脚本分享
2017/01/16 Python
Python 反转字符串(reverse)的方法小结
2018/02/20 Python
TensorFlow 模型载入方法汇总(小结)
2018/06/19 Python
Sanic框架安装与简单入门示例
2018/07/16 Python
解决每次打开pycharm直接进入项目的问题
2018/10/28 Python
Python  Django 母版和继承解析
2019/08/09 Python
python3 deque 双向队列创建与使用方法分析
2020/03/24 Python
HTML5 SEO优化的一些建议
2020/08/27 HTML / CSS
美国内衣品牌:Leonisa
2016/08/14 全球购物
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
潘多拉珠宝英国官方网上商店:PANDORA英国
2018/06/12 全球购物
Linux Interview Questions For software testers
2013/05/17 面试题
幼儿园安全检查制度
2014/01/30 职场文书
加多宝凉茶广告词
2014/03/18 职场文书
SpringBoot项目部署到阿里云服务器的实现步骤
2022/06/28 Java/Android