06 The Matrix 黑客帝国

发表于 | 分类于 | 阅读次数


第六周，做点什么呢？？想必大家都看过 黑客帝国 系列电影吧！先放一张图片致敬一下经典。

我们就来做一下里面的背景特效吧：The Matrix

效果预览

是不是很赞！！一起来实现一下吧！！

项目分析

1、用到 HTML5 中的 canvas 知识；

2、使用 js 生成随机的字符；

3、把整个页面当做一个 canvas 画布，把字符画上去；

4、重复这个动作：生成字符、画到页面上。需要考虑的是每次字符在页面的位置。

HTML&CSS

页面中只有一个 canvas 画布，所以不需要什么布局。

1
2
3
4
5
6
7
<!-- html -->
<canvas id="content" width="1366px" height="768px"></canvas>
<!-- css -->
*{
  margin: 0;
  padding: 0;
}

1、因为 canvas 尺寸的改变会使里面的内容重新绘制，所以为了不影响最后的效果，最好将这个值设置为本机的屏幕分辨率。（至于怎么影响效果后面会讲）

2、取消浏览器默认的 margin 和 padding。

JS部分

同样先上代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var cav = document.getElementById('content');
var w = window.screen.width;
var h = window.screen.height;
var yPositions = Array300).join(0).split('');   
var ctx = cav.getContext('2d');  //初始化画布
var draw = function(){
  ctx.fillStyle = 'rgba(0,0,0,.05)';
  ctx.fillRect(0,0,w,h);
  ctx.fillStyle = 'green';
  ctx.font = '20px';
  yPositions.map(function(y,index){  
    text = String.fromCharCode(1e2 + Math.random() * 330);  //生成随机字母
    x = index * 10;
    cav.getContext('2d').fillText(text,x,y);
    if (y > Math.random() * 1e4) {
        yPositions[index] = 0;
    } else {
        yPositions[index] = y + 10;
    }
  });
}
setInterval('draw()',30);

1、首先获取画布；

2、获取本机显示器的分辨率：

1
2
var w = window.screen.width;
var h = window.screen.height;

3、然后要在页面中画出一个矩形（这个就是整个特效的范围）。前面说过，canvas 的尺寸会影响最后的效果，是因为，我们不能动态的改变 canvas 的尺寸（那样会使 canvas 重新绘制），所以当页面绘制好后我们再去调整浏览器的尺寸是就会产生白边，你可以去试一下。。。

所以解决办法就是直接把 canvas 的尺寸设置为屏幕的分辨率。这样不管怎么调整，浏览器的尺寸都不可能比屏幕还大吧。

1
2
ctx.fillStyle = 'rgba(0,0,0,.05)';
ctx.fillRect(0,0,w,h);

4、然后就应该考虑怎样来生成随机字符了。我们用了这样一段代码：

1
text = String.fromCharCode(1e2 + Math.random() * 330);

fromCharCode(num) 会返回一个 Unicode 编码为num 字符。所以这句话理论上可以写成 fromCharCode(Math.random * n) 。（只要 num 的范围在 0000 - FFFF）

对于 Unicode 编码，他为世界上所有的字符进行了编码。十六进制范围为从 0000 - FFFF，其中中文字段在 4E00-9FA5。

5、map(callback()) 方法创建一个新数组，其结果是该数组中的每个元素调用一个提供的函数。callback 函数会被自动传入三个参数：数组元素，元素索引，原数组本身。所以没执行一次 draw() 函数会在 X 方向上生成一排的字符。

6、用 x 和 y 来指定字符在页面中的位置。x 指定没列字符占 10px 的宽度，y 同样每次增加 10px，为每个字符在 y 方向占 10px 高度。当然每列字符不可能数量都相同，所以只要 y 的值大于一个随机数之后新的字符就生成在页面顶部。

1
2
3
4
5
6
x = index * 10;
if (y > Math.random() * 1e4) {
  yPositions[index] = 0;
} else {
  yPositions[index] = y + 10;
}

7、忘记说了，再次之前要生成一个值全部为 0 的数组，主要控制字符的列数。

1
2
3
4
var yPositions = Array(300);
yPositions.fill(0); 
//也可以这样写
//var yPositions = Array(300).join(0).split('');

完成。。。

文章中如果有错误欢迎指出，非常乐意和大家一起交流。
完整代码可到 JavaScript-Programs 下载