Canvas之"黑客帝国"
来源:互联网 发布:python 语音处理 编辑:程序博客网 时间:2024/05/17 06:39
首先,在新建页面写上canvas标签,在js中获取并设置高宽:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
canvas标签设置完了之后,然后再来设置一个数组,也就是从屏幕上掉落出来哪些文字,当然这里设置什么都可以,我设置的是0~9、a~z,为了简单我就是使用了split方法将字符串转换为数组:
- 1
- 2
- 1
- 2
接下来就该设置一下字体的大小和屏幕总共能容纳多少列了,这里我把字体大小设置为16px,为了方便计算这里先设置为16,然后用浏览器的宽度除以字体大小,就能计算出来屏幕可以容纳多少列文字,还需要设置一个数组,来保存每一列中的文字该在哪里绘制,当然每列第一个字都是从屏幕最上面开始,需要初始化一下:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
刚刚忘了一点,没有设置onresize
,这里设置一下,当然这个在什么时候设置都是可以的,在window上添加onresize
事件,浏览器窗口改变时重新计算canvas
的大小:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
现在准备工作都完成了,接下来就开始绘制文字效果吧,前面已经定义了数组,现在需要从数组中随机取得一个数字,通过Math.random()产生随机数获取,输出文字时使用fillText()可以在指定位置输出文字,当每一列中绘制的文字超过浏览器的高度时,则从0开始重新绘制,当然如果所有的列都是在占满浏览器高度再重新绘制时这样的效果并不好看,所以我们需要一个随机数,当随机数大于0.9的时候就重新绘制,绘制完每一列文字的时候,需要保存一下下一次该列文字该在什么地方出现:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
在上面这个循环之前为了让效果更好看,我们需要让背景透明度逐渐变化,并且还需要设置好字体,所以整个draw()函数如下:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
接下来只要让它不断的循环绘制就可以了:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
然后整个绚丽的效果就完成了,是不是很简单呢。
下面是整个代码:
- Canvas之"黑客帝国"
- canvas动画之三 -- 黑客帝国文字掉落效果
- Html5 canvas黑客帝国文字瀑布效果
- js使用canvas实现 黑客帝国二进制雨
- 黑客帝国
- 黑客帝国
- 黑客帝国
- 黑客帝国
- 用canvas 实现《Matrix》(黑客帝国)中 电脑屏幕效果
- 黑客帝国之酷炫屏保数字雨
- 黑客帝国之PHP与ASP.net不得不说的故事
- 《黑客帝国》引发关于缸中之脑的联想
- Canvas之 canvas.save()与canvas.restore()
- 再看黑客帝国
- 黑客帝国3
- 黑客帝国效果
- 黑客帝国cmatrix
- 黑客帝国 demo
- HTTP代理与防火墙
- Git(GitHub) 007 如何删除一个库
- 剑指offer-----链表中环的入口节点(java版)
- jdbc
- 懒加载的坑
- Canvas之"黑客帝国"
- leetcode oj 166. Fraction to Recurring Decimal 除法
- MFC程序框架
- 激活windows
- UML——时序图
- HDU1058 Humble Numbers
- 4002: [JLOI2015]有意义的字符串
- js调用百度地图API
- 一元多项式求和