如果你用过 CSDN 的话，会发现有些博主的背景是一个黑客帝国的代码雨效果
就是很多代码字符不断的从上往下掉落
今天我们来试着使用 javascript 实现这样一个效果
思路
研究动画的第一步就是先将动画中的某一帧提取出来，将代码雨效果静止后，发现他们只是一些出现在不同位置的字符而已
接着在思考，整个效果是不是可以拆分成多个列效果，因为每一列实现的效果都是一样的，都是字符不断往下掉落，那么我们只要实现了一列的动画效果，然后复制多份，就实现了整个效果？
接着我们研究单独一列的动画效果
我们会发现字符往下掉的途中还会有一个残影，并且字符会随机发生改变，比如掉下去之后就从字幕 s 变成了 m
我们先考虑残影的实现，是不是只需要更改上一次绘制的字符的透明度就好了，比如下落前先将上一次绘制的字符的透明度从 1 变成 0.1，然后再绘制下落的那个字符，这样是不是就实现了残影效果
那如何改变透明度呢？因为每一列都需要同步这种操作，所以我们可以考虑不修改字符的透明度，可以在每次绘制的时候先往画布上面涂上一层透明度为 0.1 的黑色背景覆盖在上面，然后再绘制下落的字符就好了
解决了残影的实现，接下来思考如何绘制下落的那个字符
首先我们知道下落的那个字符是随机的，所以我们需要随机生成一个字符，然后绘制到哪里呢？
如果把这两行看成是一个文本域，是不是需要绘制到下一行？那么他们之间的间距就是一个字体的大小？
所以把下一个字符绘制到上一个字符的 y 轴位置往下一个字体大小就好了
接着处理边界问题，是不是只要当前绘制的字符的 y 轴位置大于画布的高度，然后下一个字符从画布就要从最顶端开始绘制
这样基本效果我们就已经实现了，但是这样我们还需要一个层次不齐的绘制效果
这个我们可以使用一个随机数，比如当当前绘制的字符超过画布的高度，并且随机数大于 0.9 的时候，才从最顶端开始绘制，这样就可以实现层次不齐的效果
实现
先准备好一个基本的 html 结构
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
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
background-color: #000;
}
canvas {
height: 100vh;
width: 100vw;
}
</style>
</head>
<body>
<canvas class="canvas"></canvas>
<script></script>
</body>
</html>
|
接着再编写 js 脚本初始化 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
| const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const height = window.innerHeight * window.devicePixelRatio;
const width = window.innerWidth * window.devicePixelRatio;
canvas.width = width;
canvas.height = height;
const fontSize = 20 * window.devicePixelRatio;
const columnWidth = fontSize;
const columnCount = Math.round(width / columnWidth);
const nextChar = new Array(columnCount).fill(0);
const getRandomColor = () => {
return `rgb(${Math.floor(Math.random() * 255)},${Math.floor(
Math.random() * 255
)},${Math.floor(Math.random() * 255)})`;
};
const getRandomChar = () => {
const str = "console.log(hello world)";
return str.charAt(Math.floor(Math.random() * str.length));
};
|
接着我们就可以开始编写绘制函数了，在脚本中添加以下内容
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
| const draw = () => {
ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
ctx.fillRect(0, 0, width, height);
for (let i = 0; i < columnCount; i++) {
const char = getRandomChar();
const color = getRandomColor();
ctx.fillStyle = color;
ctx.font = `${fontSize}px "Roboto Mono"`;
const s = nextChar[i];
const x = i * columnWidth;
const y = (s + 1) * fontSize;
if (y >= height && Math.random() > 0.9) {
nextChar[i] = 0;
} else {
nextChar[i]++;
}
ctx.fillText(char, x, y);
}
};
|
接着我们调用 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
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
| const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const height = window.innerHeight * window.devicePixelRatio;
const width = window.innerWidth * window.devicePixelRatio;
canvas.width = width;
canvas.height = height;
const fontSize = 20 * window.devicePixelRatio;
const columnWidth = fontSize;
const columnCount = Math.round(width / columnWidth);
const nextChar = new Array(columnCount).fill(0);
const getRandomColor = () => {
return `rgb(${Math.floor(Math.random() * 255)},${Math.floor(
Math.random() * 255
)},${Math.floor(Math.random() * 255)})`;
};
const getRandomChar = () => {
const str = "console.log(hello world)";
return str.charAt(Math.floor(Math.random() * str.length));
};
const draw = () => {
ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
ctx.fillRect(0, 0, width, height);
for (let i = 0; i < columnCount; i++) {
const char = getRandomChar();
const color = getRandomColor();
ctx.fillStyle = color;
ctx.font = `${fontSize}px "Roboto Mono"`;
const s = nextChar[i];
const x = i * columnWidth;
const y = (s + 1) * fontSize;
if (y >= height && Math.random() > 0.9) {
nextChar[i] = 0;
} else {
nextChar[i]++;
}
ctx.fillText(char, x, y);
}
};
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
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
68
| const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const height = window.innerHeight * window.devicePixelRatio;
const width = window.innerWidth * window.devicePixelRatio;
canvas.width = width;
canvas.height = height;
const fontSize = 20 * window.devicePixelRatio;
const columnWidth = fontSize;
const columnCount = Math.round(width / columnWidth);
const nextChar = new Array(columnCount).fill(0);
const getRandomColor = () => {
return `rgb(${Math.floor(Math.random() * 255)},${Math.floor(
Math.random() * 255
)},${Math.floor(Math.random() * 255)})`;
};
const getRandomChar = () => {
const str = "console.log(hello world)";
return str.charAt(Math.floor(Math.random() * str.length));
};
const draw = () => {
ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
ctx.fillRect(0, 0, width, height);
for (let i = 0; i < columnCount; i++) {
const char = getRandomChar();
const color = getRandomColor();
ctx.fillStyle = color;
ctx.font = `${fontSize}px "Roboto Mono"`;
const s = nextChar[i];
const x = i * columnWidth;
const y = (s + 1) * fontSize;
if (y >= height && Math.random() > 0.9) {
nextChar[i] = 0;
} else {
nextChar[i]++;
}
ctx.fillText(char, x, y);
}
};
const render = () => {
draw();
requestAnimationFrame(render);
};
render();
|
这样我们的效果就完全实现啦
效果预览
完整代码
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
68
69
70
71
72
73
74
75
76
77
78
79
| <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
}
body {
background-color: #000;
}
canvas {
height: 100vh;
width: 100vw;
}
</style>
</head>
<body>
<canvas class="canvas"></canvas>
<script>
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const height = window.innerHeight * window.devicePixelRatio;
const width = window.innerWidth * window.devicePixelRatio;
canvas.width = width;
canvas.height = height;
const fontSize = 20 * window.devicePixelRatio;
const columnWidth = fontSize;
const columnCount = Math.round(width / columnWidth);
const nextChar = new Array(columnCount).fill(0);
const draw = () => {
ctx.fillStyle = "rgba(0, 0, 0, 0.1)";
ctx.fillRect(0, 0, width, height);
for (let i = 0; i < columnCount; i++) {
const char = getRandomChar();
const color = getRandomColor();
ctx.fillStyle = color;
ctx.font = `${fontSize}px "Roboto Mono"`;
const s = nextChar[i];
const x = i * columnWidth;
const y = (s + 1) * fontSize;
if (y >= height && Math.random() > 0.9) {
nextChar[i] = 0;
} else {
nextChar[i]++;
}
ctx.fillText(char, x, y);
}
};
const getRandomColor = () => {
return `rgb(${Math.floor(Math.random() * 255)},${Math.floor(
Math.random() * 255
)},${Math.floor(Math.random() * 255)})`;
};
const getRandomChar = () => {
const str = "console.log(hello world)";
return str.charAt(Math.floor(Math.random() * str.length));
};
const render = () => {
draw();
requestAnimationFrame(render);
};
render();
</script>
</body>
</html>
|
进阶
其实你还可以控制代码雨的左右移动，每次绘制的时候给一点 x 轴的随机偏移量，这样就能实现更加真实的效果。
或者你还可以将字符替换成图片，实现更加丰富的效果
