黑客帝国代码特效(一招让妹子尖叫)
信托各人都对黑客帝国影戏里的矩阵雨印象很是深刻,就是下面这个结果。
结果很是酷炫,我看了一下相干实现库的代码,也很是简朴,焦点就是用好呼吁行的节制字符,这里分享一下。
在 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
亮白色
(责任编辑:admin)