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, ...
随机推荐
- frameset和iframe--框架对象及元素标签对象
chrome不兼容:不支持跨frame的变量的获取 var oParent = parent.document.getElementById('contentFrm'); //frameset标签对象 ...
- C# 右键菜单 contextMenuStrip
1.添加contextMenuStrip控件 默认命名:contextMenuStrip1 2.在要显示的控件上,找到其ContextMenuStrip属性,并设置其为contextMenuStrip ...
- PHP中的ob_start() 的使用
1.在PHP编程中, 我们经常会遇到一些直接产生输出的函数, 如passthru(),readfile(), var_dump() 等. 但有时我们想把这些函数的输出导入到文件中,或者先经过处理再输出 ...
- Android Studio快捷键快速入门
调整,Settings->IDE Settings->Editor->Appearance->Show line numbers 显示代码行数Settings->IDE ...
- iOS开发——常用字符串string相关方法和处理
(持续更新中……) 1,四舍五入 2,剔除字符 3,拼接字符 4,字符个数和长度 5,字符串的比较 6,字符串的范围 7,字符串转Number类型
- iOS .pch文件的使用
什么是.pch文件预编译头文件(一般扩展名为.PCH),是把一个工程中较稳定的代码预先编译好放在一个文件(.PCH)里.这些预先编译好的代码可以是任何的C/C++代码--甚至可以是inline函数,只 ...
- Ambiguous handler methods mapped for HTTP path
一.问题:映射重复导致的错误 java代码如下: @RequestMapping(value = "/info/{remove}/{id}", method = RequestMe ...
- windows server 2008镜像重启后密码变为默认密码的问题的解决方案
1. cmd中执行regedit,打开注册表: 修改HKEY_LOCAL_MACHINE\SOFTWARE\Wow6432Node\Cloudbase Solusions\Cloudbase-Init ...
- Cogs 1008. 贪婪大陆(树状数组)
贪婪大陆 难度等级 ★★ 时间限制 1000 ms (1 s) 内存限制 128 MB 测试数据 10 简单对比 输入文件:greedisland.in 输出文件:greedisland.out 简单 ...
- C++ 智能指针auto_ptr详解
1. auto_ptr 的设计动机: 函数操作经常依照下列模式进行: 获取一些资源 执行一些动作 释放所获取的资源 那么面对这些资源的释放问题就会出现下面的两种情况: 一开始获得的资源被绑定于局部对象 ...