网络安全检测|网络安全服务|网络安全扫描-香港墨客投资移动版

相信大家都对黑客帝国电影里的矩阵雨印象非常深刻，就是下面这个效果。

效果非常酷炫，我看了一下相关实现库的代码，也非常简单，核心就是用好命令行的控制字符，这里分享一下。

在 matrix-rain 的源代码中，总共只有两个文件，ansi.js 和 index.js，非常小巧。

ansi.js 中定义了一些命令行的操作方法，也就是对控制字符做了一些方法封装，代码如下：

const ctlEsc = `\x1b[`;const ansi = { reset: () => `${ctlEsc}c`, clearScreen: () => `${ctlEsc}2J`, cursorHome: () => `${ctlEsc}H`, cursorPos: (row, col) => `${ctlEsc}${row};${col}H`, cursorVisible: () => `${ctlEsc}?25h`, cursorInvisible: () => `${ctlEsc}?25l`, useAltBuffer: () => `${ctlEsc}?47h`, useNormalBuffer: () => `${ctlEsc}?47l`, underline: () => `${ctlEsc}4m`, off: () => `${ctlEsc}0m`, bold: () => `${ctlEsc}1m`, color: c => `${ctlEsc}${c};1m`, colors: {fgRgb: (r, g, b) => `${ctlEsc}38;2;${r};${g};${b}m`,bgRgb: (r, g, b) => `${ctlEsc}48;2;${r};${g};${b}m`,fgBlack: () => ansi.color(`30`),fgRed: () => ansi.color(`31`),fgGreen: () => ansi.color(`32`),fgYellow: () => ansi.color(`33`),fgBlue: () => ansi.color(`34`),fgMagenta: () => ansi.color(`35`),fgCyan: () => ansi.color(`36`),fgWhite: () => ansi.color(`37`),bgBlack: () => ansi.color(`40`),bgRed: () => ansi.color(`41`),bgGreen: () => ansi.color(`42`),bgYellow: () => ansi.color(`43`),bgBlue: () => ansi.color(`44`),bgMagenta: () => ansi.color(`45`),bgCyan: () => ansi.color(`46`),bgWhite: () => ansi.color(`47`), },};module.exports = ansi;

这里面 ansi 对象上的每一个方法不做过多解释了。我们看到，每个方法都是返回一个奇怪的字符串，通过这些字符串可以改变命令行的显示效果。

这些字符串其实是一个个控制字符组成的控制序列。那什么是控制字符呢？我们应该都知道 ASC 字符集，这个字符集里面除了定义了一些可见字符以外，还有很多不可见的字符，就是控制字符。这些控制字符可以控制打印机、命令行等设备的显示和动作。

有两个控制字符集，分别是 CO 字符集和 C1 字符集。C0 字符集是 0x00 到 0x1F 这两个十六进制数范围内的字符，而 C1 字符集是 0x80 到 0x9F 这两个十六进制数范围内的字符。C0 和 C1 字符集内的字符和对应的功能可以在这里查到，我们不做详细描述了。

上面代码中，\x1b[ 其实是一个组合，\x1b 定义了 ESC 键，后跟 [ 表示这是一个控制序列导入器（Control Sequence Introducer，CSI）。在 \x1b[ 后面的所有字符都会被命令行解析为控制字符。

常用的控制序列有这些：

序列

功能

CSI n A

向上移动 n（默认为 1） 个单元

CSI n A

向下移动 n（默认为 1） 个单元

CSI n C

向前移动 n（默认为 1） 个单元

CSI n D

向后移动 n（默认为 1） 个单元

CSI n E

将光标移动到 n（默认为 1） 行的下一行行首

CSI n F

将光标移动到 n（默认为 1） 行的前一行行首

CSI n G

将光标移动到当前行的第 n（默认为 1）列

CSI n ; m H

移动光标到指定位置，第 n 行，第 m 列。n 和 m 默认为 1，即 CSI ;5H 与 CSI 1;5H 等同。

CSI n J

清空屏幕。如果 n 为 0（或不指定），则从光标位置开始清空到屏幕末尾；如果 n 为 1，则从光标位置清空到屏幕开头；如果 n 为 2，则清空整个屏幕；如果 n 为 3，则不仅清空整个屏幕，同时还清空滚动缓存。

CSI n K

清空行，如果 n 为 0（或不指定），则从光标位置清空到行尾；如果 n 为 1，则从光标位置清空到行头；如果 n 为 2，则清空整行，光标位置不变。

CSI n S

向上滚动 n （默认为 1）行

CSI n T

向下滚动 n （默认为 1）行

CSI n ; m f

与 CSI n ; m H 功能相同

CSI n m

设置显示效果，如 CSI 1 m 表示设置粗体，CSI 4 m 为添加下划线。

我们可以通过 CSI n m 控制序列来控制显示效果，在设置一种显示以后，后续字符都会沿用这种效果，直到我们改变了显示效果。可以通过 CSI 0 m 来清楚显示效果。常见的显示效果可以在SGR (Select Graphic Rendition) parameters 查到，这里受篇幅限制就不做赘述了。

上面的代码中，还定义了一些颜色，我们看到颜色的定义都是一些数字，其实每一个数字都对应一种颜色，这里列一下常见的颜色。

前景色

背景色

名称

前景色

背景色

名称

30

40

黑色

90

100

亮黑色

31

41

红色

91

101

亮红色

32

42

绿色

92

102

亮绿色

33

43

黄色

93

103

亮黄色

34

44

蓝色

94

104

亮蓝色

35

45

品红色（Magenta）

95

105

亮品红色（Magenta）

36

46

青色（Cyan）

96

106

亮青色（Cyan）

37

47

白色

97

107

亮白色