动态效果

点击此处查看效果

背景

今天看到一个数字雨的效果,看起来非常炫酷,接着就去网上查了下如何实现的,然后才知道用canvas实现这个效果并不复杂,然后就自己捣鼓了一番,对canvas不了解的可以先去了解一下

具体实现

思路

先说一下思路再上代码,核心的东西就两点,一是数字落下的 Y 轴坐标随机产生,使得所有数字不在同一水平线上落下,看起来才比齐刷刷落下来效果好看。二是使用定时器,隔一段时间调用绘制数字的方法来绘制数字,并且要绘制的数字的位置不断迭代,才有落下来的效果,此处可以去看一下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
//获取屏幕可视区域大小
var d = document.documentElement;
var clinetW = d.clientWidth;
var clinetH = d.clientHeight;

//设置画布大小
var canvas = document.querySelector('canvas');
canvas.width = clinetW;
canvas.height = clinetH;

var cxt = canvas.getContext('2d');
var rainStr = 'The matrix of hackers';
var arr = rainStr.split('');

var fontSize = 14;
// 计算行数
var cols = Math.floor(clinetW / fontSize);
// 初始化Y轴坐标
var down = [];
for (var i = 0; i < cols; i++) {
down.push(Math.floor(Math.random() * -100));
}

function drawRain() {
// 填充背景(ps:背景采用rgba,可尝试不同透明度的效果)
cxt.fillStyle = 'rgba(0,0,0,.1)';
cxt.fillRect(0, 0, clinetW, clinetH);

// 设置字体颜色
cxt.fillStyle = '#00ff00';
for (var i = 0; i < down.length; i++) {
var randomNum = Math.random();
// 绘制文字
cxt.fillText(arr[Math.floor(randomNum * arr.length)], i * fontSize, down[i] * fontSize);

if (down[i] * fontSize > clinetH && randomNum > 0.9) {
down[i] = 0;
}
//绘制文字的下一个位置
down[i]++;
}
}

setInterval(drawRain, 30);

简单封装

把上面的代码封装成一个函数

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
/**
* [rain description]
* @param {[Element]} canvas canvas元素对象
* @param {[String]} text 掉落的字符串
* @param {[String]} symbol 分隔符
* @param {[Number]} speed 掉落速度
* @return {[type]} [description]
*/
function rain(canvas, text, symbol, speed) {
//获取屏幕可视区域大小
var d = document.documentElement;
var clinetW = d.clientWidth;
var clinetH = d.clientHeight;

//设置画布大小
var canvas = canvas || document.querySelector('canvas');
canvas.width = clinetW;
canvas.height = clinetH;

var cxt = canvas.getContext('2d');
var rainStr = text || 'The matrix of hackers';
var symbol = symbol || '';
var arr = rainStr.split(symbol);

var fontSize = 14;
// 计算行数
var cols = Math.floor(clinetW / fontSize);
// 初始化Y轴坐标
var down = [];
for (var i = 0; i < cols; i++) {
down.push(Math.floor(Math.random() * -100));
}

function drawRain() {
// 填充背景(ps:背景采用rgba,可尝试不同透明度的效果)
cxt.fillStyle = 'rgba(0,0,0,.1)';
cxt.fillRect(0, 0, clinetW, clinetH);

// 设置字体颜色
cxt.fillStyle = '#00ff00';
for (var i = 0; i < down.length; i++) {
var randomNum = Math.random();
// 绘制文字
cxt.fillText(arr[Math.floor(randomNum * arr.length)], i * fontSize, down[i] * fontSize);

if (down[i] * fontSize > clinetH && randomNum > 0.9) {
down[i] = 0;
}

down[i]++;
}
}
var speed = speed || 30;
setInterval(drawRain, speed);
}
var canvas = document.querySelector('canvas');
var text = '富强 民主 文明 和谐 自由 平等 公正 法治 爱国 敬业 诚信 友善';
rain(canvas, text, '', 30);

最后

完整的代码请查看我的github