使用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中使用replace结合正则实现replaceAll的效果
Jun 04 Javascript
JavaScript如何实现在文本框(密码框)输入提示语
Dec 25 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
Jul 27 Javascript
jquery把int类型转换成字符串类型的方法
Oct 07 Javascript
Java与JavaScript中判断两字符串是否相等的区别
Mar 13 Javascript
微信小程序封装http访问网络库实例代码
May 24 Javascript
详解angularjs实现echart图表效果最简洁教程
Nov 29 Javascript
bootstrap模态框弹出和隐藏,动态改变中间内容的实例
Aug 10 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
Sep 29 Javascript
vue中使用vue-print.js实现多页打印
Mar 05 Javascript
基于leaflet.js实现修改地图主题样式的流程分析
May 15 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
Jul 22 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
完美解决令人抓狂的zend studio 7代码提示(content Assist)速度慢的问题
2013/06/20 PHP
PHP连接sftp并下载文件的方法教程
2018/08/26 PHP
什么是JavaScript
2009/08/13 Javascript
Jquery 设置标题的自动翻转
2009/10/03 Javascript
JS小游戏之象棋暗棋源码详解
2014/09/25 Javascript
使用JavaScript制作一个简单的计数器的方法
2015/07/07 Javascript
jQuery+HTML5美女瀑布流布局实现方法
2015/09/21 Javascript
jqGrid表格应用之新增与删除数据附源码下载
2015/12/02 Javascript
无需 Flash 使用 jQuery 复制文字到剪贴板
2016/04/26 Javascript
简单实现的JQuery文本框水印插件
2016/06/14 Javascript
javascript数字验证的实例代码(推荐)
2016/08/20 Javascript
前端开发之CSS原理详解
2017/03/11 Javascript
关于vuex的学习实践笔记
2017/04/05 Javascript
Vue的Flux框架之Vuex状态管理器
2017/07/30 Javascript
JavaScript简单实现合并两个Json对象的方法示例
2017/10/16 Javascript
详解PHP后期静态绑定分析与应用
2018/03/21 Javascript
JS实现电话号码的字母组合算法示例
2019/02/26 Javascript
原生js实现each方法实例代码详解
2019/05/27 Javascript
layui问题之渲染数据表格时,仅出现10条数据的解决方法
2019/09/12 Javascript
python字符串替换示例
2014/04/24 Python
Python比较两个图片相似度的方法
2015/03/13 Python
使用IPython下的Net-SNMP来管理类UNIX系统的教程
2015/04/15 Python
python实现简单中文词频统计示例
2017/11/08 Python
python 异或加密字符串的实例
2018/10/14 Python
PyQt5下拉式复选框QComboCheckBox的实例
2019/06/25 Python
Django 响应数据response的返回源码详解
2019/08/06 Python
Python数据处理篇之Sympy系列(五)---解方程
2019/10/12 Python
python tkinter之 复选、文本、下拉的实现
2020/03/04 Python
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
既然说Ruby中一切都是对象,那么Ruby中类也是对象吗
2013/01/26 面试题
亲子读书活动方案
2014/02/22 职场文书
中国梦读书活动总结
2014/07/10 职场文书
留学推荐信英文范文
2015/03/26 职场文书
销售会议开幕词
2016/03/04 职场文书
演讲开头怎么书写?
2019/08/06 职场文书
CSS三大特性继承性、层叠性和优先级详解
2022/01/18 HTML / CSS