canvas仿黑客帝国的字符下落
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
<!DOCTYPE html> <html lang= "en" > <head> <meta charset= "UTF-8" > <title>二进制雨</title> </head> <body> <div style= "color:red;text-align: center;font-size: 20px;" >二进制雨</div> <canvas id= "myCanvas" width= "1000px" height= "600px" style= "background-color: black;" ></canvas> <script> var draw= function (ctx,x,y,size){ this .ctx=ctx; this .x=x; this .y=y; this .size=size; var y1= this .y; this .drawText= function (){ var str=Math.ceil(Math.random()*10000).toString(2); var grd= this .ctx.createLinearGradient( this .x, this .y, this .x, this .y- this .ctx.measureText(str).width); grd.addColorStop(0, "#00FF00" ); grd.addColorStop(1, "#004400" ); this .ctx.fillStyle=grd; this .ctx.font= this .size+ "px Arial" ; for ( var i=str.length-1;i>=0;i--) { this .ctx.fillText(str.charAt(i), this .x, y1-=15); } y1= this .y+=10; if (y1-720+ this .ctx.measureText(str).width>0){ this .x=Math.ceil(Math.random()*1000); y1= this .y=Math.ceil(Math.random()*100); } } }; var rain= function (ctx,length){ this .length=length; this .ctx=ctx; var x=[]; var y=[]; var size=[]; var texts=[]; var i=0; for (;i<length;i++){ x[i]=Math.ceil(Math.random()*1000); y[i]=Math.ceil(Math.random()*500); size[i]=Math.ceil(Math.random()*15); texts[i]= new draw( this .ctx,x[i],y[i],size[i]); } this .run= function (){ ctx.clearRect(0,0,1000,600); for ( var j=0;j<length;j++){ texts[j].drawText(); } }; }; var canvas=document.getElementById( "myCanvas" ); var ctx=canvas.getContext( "2d" ); var rain0= new rain(ctx,100); setInterval(rain0.run,50); </script> </body> </html> |
这是以前的博客 效果还行吧。手机看不了 看了也卡。。。。http://blog.chinaunix.net/uid-30494608-id-5201548.html
canvas仿黑客帝国的字符下落的更多相关文章
- 车大棒浅谈for循环+canvas实现黑客帝国矩形阵
背景: 一日在网上闲逛的之时,突然看到一个利用JQ插件实现canvas实现的电影黑客帝国的小Demo.觉得创意不错,就下载下来研究一下. 网上浏览jQuery的写法 $(document).ready ...
- Canvas 仿百度贴吧客户端 loading 小球
前言 几天前在简书上看到在一篇文章<Android仿百度贴吧客户端Loading小球>,看了一下作者,他写了两个好玩的 demo,效果图如下: 今天趁着周末有空,用 H5 的 Canvas ...
- for循环+canvas实现黑客帝国矩形阵
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...
- js仿黑客帝国文字数字雨效果
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- jquery实现隐藏显示层动画效果、仿新浪字符动态输入、tab效果
已经有两年多没登陆csdn账号了,中间做了些旁的事,可是现在却还是回归程序,但改做前端了,虽然很多东西都已忘得差不多了,但还是应该摆正心态,慢慢来,在前端漫游,做一只快乐双鱼. 路是一步一步走出来的, ...
- canvas实现黑客帝国矩形阵
在博客园看到了车大棒的写了一篇关于实现黑客帝国矩形阵,觉得canvas还是有一些奇妙的地方所在,故做个笔记记录一下. 实现的效果如下: 真的是一两行关键的代码添加就能实现意想不到的效果. 由于是can ...
- canvas仿芝麻信用分仪表盘
这是一个仿支付宝芝麻信用分的一个canvas,其实就是一个动画仪表盘. 首先, 上原图: 这个是在下支付宝上的截图,分低各位见笑了.然后看下我用canvas实现的效果图: <canvas id= ...
- HTML5 Canvas实现黑客帝国文字掉落效果
效果: 原理: 用canvas逐行输出文字,然后让背景颜色逐渐加深,再随机中断某些列. 代码: HTML: <canvas id="c"></canvas> ...
- canvas仿屏幕保护运动线条
canvas是H5中及其重要的一个新标签,它得出现不仅让前端做图形图表功能变得异常强大,还用极强的性能丰富前端渲染页面的能力. Life is not a problem to be solved, ...
随机推荐
- asp.net下载的方法1
1. 首先新建一个用于进行下载处理的page页,如download.aspx,里面什么东西也没有. 2. 添加一个DownloadHandler类,它继承于IHttpHandler接口,可以用来自定义 ...
- Errors occurred during the build. Errors running builder 'DeploymentBuilder' on project '项目名'
问题描述: Errors occurred during the build. Errors running builder 'DeploymentBuilder' on project 'myf'. ...
- 通过js实时检测文本框内容
思路 1,在获取文本框焦点后,启动定时器,每隔100毫秒来查看文本内容的改变 2,在文本框失去焦点后,清除定时器 下面是一个简单的例子 <!DOCTYPE html> <html&g ...
- 20160501--struts2入门2
一.Action名称的搜索顺序 1.获得请求路径的URI,例如url是:http://server/struts2/path1/path2/path3/test.action 2.首先寻找name ...
- 自定义控件学习 Day44
自定义控件学习 Day44 onMeasure 测量控件的宽高. onLayout 设置位置 onDarw 绘制控件 问题堆栈 1. 事件监听传递 最外层获取到控件,根据事件事件传递机制,返回值fal ...
- ios 阻止GDB依附
GDB,IDE是大多数hackers的首选,阻止GDB依附到应用的常规办法是: . #import <sys/ptrace.h> . . int main(int argc, charch ...
- Java Web应用启动间隔执行的程序
Reference:<Java定时器timer.schedule在Web中间隔执行任务和定时><[Java]Timer和TimerTask详解> 做了一个Demo,完成如下的功 ...
- 如何恢复oracle中已删除的表
在9i中Oracle引入了flashback的概念,可以将数据返回到某个时间点,但对于诸如drop/truncate等DDL语句却尚不支持.进入Oracle10g,这一缺陷得到了弥补.可以将丢失掉的表 ...
- oracle linux下oracle 10g启动EM、isqlplus及相关命令语法
转载:http://hancang2000.blog.sohu.com/139239421.html ORACLE_HOME/bin/emctl start dbconsole $ORACLE_HOM ...
- 10.08_逛逛OSC
(1)每天逛逛OSC是我的习惯了. JNative.JACOB.Shrinkwrap API? .Lua.WSO2 Identity Server .JBoss Forge.Bugzilla.Cou ...