黑客帝国效果
2016-02-26 17:35
260 查看
<!DOCTYPE html> <html> <head> <!--版权:小哲哥 学习所写 --> <meta charset="UTF-8"> <title></title> </head> <body> <canvas id="c"></canvas> <script> var c=document.getElementById("c"); var ctx=c.getContext("2d"); c.width=window.innerWidth; c.height=window.innerHeight; // ctx.fillRect(0,0,100,100); // a,b,c,d分别代表x方向偏移,y方向偏移,宽,高 var string1 = "abcdefghijklmnopqrstuvwxyz"; string1.split(""); var fontsize=20; columns=c.width/fontsize; var drop = []; for(var x=0;x<columns;x++) { drop[x]=0; } function drap(){ ctx.fillStyle="rgba(0,0,0,0.07)"; ctx.fillRect(0,0,c.width,c.height); ctx.fillStyle="#0F0"; ctx.font=fontsize+"px arial"; for(var i=0;i<drop.length;i++){ var text1=string1[Math.floor(Math.random()*string1.length)]; ctx.fillText(text1,i*fontsize,drop[i]*fontsize); drop[i]++; if(drop[i]*fontsize>c.height&&Math.random()>0.9){//90%的几率掉落 drop[i]=0; } } } setInterval(drap,20); </script> </body> </html>
相关文章推荐
- 创建环境使用的存储过程
- Spark MLlib 1.6 -- 聚类
- jQuery基础知识之选择器
- 关于aspx 页面生成html 源码顶部空行不得不说的事儿
- ios runtime(1)
- 在Nodejs中贯彻单元测试
- oracle数据库imp导入报错IMP-00002
- 在MyEclipse中安装SVN插件subclipse
- hive使用小结
- Spring中@Autowired注解、@Resource注解的区别
- 在Eclipse中管理Java类引用的技巧
- poj 1151 Atlantis && codeforces #337 D. Vika and Segments (线段树+扫描线)(求面积并)
- 二叉搜索树
- OkHttp3源码分析
- [BZOJ1076] [SCOI2008]奖励关
- Ripsaw EV2 Extreme Luxury Super Tank 2015
- cocoaPods配置
- 年终总结
- git遇到的问题
- Erlang 程序设计 学习笔记(四) 二进制型与位语法