少年不识愁滋味，爱上层楼。爱上层楼。为赋新词强说愁。
而今识尽愁滋味，欲说还休。欲说还休。却道天凉好个秋。

辛弃疾《丑奴儿·书博山道中壁》

效果预览

从上至下，依次是 阿拉伯语 、甲骨文 、日语 、彝语 、藏语 、希伯来语 、小篆 、印地语 、大篆 、西里尔字母 。

gif预览










具体代码

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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>黑客帝国代码雨效果实现</title>
</head>

<body>
    <script>
        const width = window.innerWidth;
        const height = window.innerHeight;
        const fontSize = 20; // 修改这里可以设置字号
        const fontName = 'arial'; // 修改这里可以设置字体，如'甲骨文'、'小篆'、'大篆'
        const characterSet = getArabCharacterSet(); // 修改这里可以设置字符集

        let img = document.createElement('img');
        img.src = 'https://cdn.jsdelivr.net/gh/Qiu-Weidong/blog/resources/images/hacker/hacker6.jpg';
        img.alt = '您要的图碎了';
        const canvas = document.createElement("canvas");
        canvas.style.cssText = 'width:100%;';
        const context = canvas.getContext("2d");

        canvas.width = width;
        canvas.height = height;

        img.onload = function () {
            let scale_x = width / this.width;
            let scale_y = height / this.height;

            if (scale_x < scale_y) {
                context.drawImage(this, (this.width * scale_y - width) / 2, 0, width / scale_y, this.height, 0, 0, width, height);
            }
            else {
                context.drawImage(this, 0, (this.height * scale_x - height) / 2, this.width, height / scale_x, 0, 0, width, height);
            }
        }
        document.body.appendChild(canvas);

        let colunms = Math.floor(width / fontSize);
        let drops = [];
        for (let i = 0; i < colunms; i++) {
            drops.push(Math.ceil(canvas.height / fontSize) + 1);
        }

        context.font = `700 ${fontSize}px ${fontName}`;
        setInterval((function () {
            let scale_x = width / img.width;
            let scale_y = height / img.height;
            context.globalAlpha = 0.13;
            if (scale_x < scale_y) {
                context.drawImage(img, (img.width * scale_y - width) / 2, 0, width / scale_y, img.height, 0, 0, width, height);
            }
            else {
                context.drawImage(img, 0, (img.height * scale_x - height) / 2, img.width, height / scale_x, 0, 0, width, height);
            }

            context.globalAlpha = 1;
            context.fillStyle = "#00cc33";
            // context.fillStyle = randColor();
            for (let j = 0; j < colunms; j++) {
                const index = Math.floor(Math.random() * characterSet.length), x = j * fontSize, y = drops[j] * fontSize;
                context.fillText(characterSet[index], x, y);
                if (y >= canvas.height && Math.random() > .99) { drops[j] = 0 } drops[j]++
            }
        }), 120);

        // 生成随机颜色
        function randColor() {
            return 'rgb(' + Math.floor(Math.random() * 256) + ',' +
                Math.floor(Math.random() * 256) + ',' +
                Math.floor(Math.random() * 256) + ')';
        }
        // 阿拉伯语 
        function getArabCharacterSet() {
            return 'ابتثجحخدذرزسشضصضطظعغفقكلمنهويء';
        }
        // 希伯来语
        function getHebrewCharacterSet() {
            return 'אבגדהוזחטיךכלםמןנסעףפץצקרשתבכפּתּוּואֽאֿשׁשׂוֹ';
        }
        // 印地语
        function getHindiCharacterSet() {
            return 'अआएईऍऎऐइओऑऒऊऔउबभचछडढफफ़गघग़हजझकखख़लळऌऴॡमनङञणऩॐपक़रऋॠऱसशषटतठदथधड़ढ़वयय़ज़';
        }
        // 日语
        function getJapaneseCharacterSet() {
            return 'あいうえおアイウエオかきくけこカキクケコさし'
            +'すせそサシスセソたちつてとタチツテトなにぬねのナニヌネノは'
            +'ひふへほハヒフヘホまみむめもマミムメモやゆよヤユヨらりるれ'
            +'ろラリルレロわゐゑをワヰヱヲんンがぎぐげごガギグゲゴざじず'
            +'ぜぞザジズゼゾだぢづでどダヂヅデドばびぶべぼバビブベボぱぴ'
            +'ぷぺぽパピプペポ';
        }
        // 西里尔
        function getCyrillicCharacterSet() {
            return 'ЀЁЂЃЄЅІЇЈЉЊЋЌЍЎЏАБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪ'
            +'ЫЬЭЮЯабвгдежзийклмнопрстуфхцчшщъыьэюяѐёђѓєѕіїјљњћќѝўџѠѡѢѣѤѥ'
            +'ѦѧѨѩѪѫѬѭѮѯѰѱѲѳѴѵѶѷѸѹѺѻѼѽѾѿҀҁ҂҃҄҅҆҇҈҉ҊҋҌҍҎҏҐґҒғҔҕҖҗҘҙҚқҜҝҞҟҠҡҢңҤҥ'
            +'ҦҧҨҩҪҫҬҭҮүҰұҲҳҴҵҶҷҸҹҺһҼҽҾҿӀӁӂӃӄӅӆӇӈӉӊӋӌӍӎӏӐӑӒӓӔӕӖӗӘәӚӛӜӝӞӟӠ'
            +'ӡӢӣӤӥӦӧӨөӪӫӬӭӮӯӰӱӲӳӴӵӶӷӸӹӺӻӼӽӾӿ';
        }
        // 藏语
        function getTibetanCharacterSet() {
            return 'ཀཁགངཅཆཇཉཏཐདནཔཕབམཙཚཛཝཞཟའཡརལཤསཧཨ';
        }
        // 彝语
        function getYiCharacterSet() {
            return 'ꀀꀖꀸꁖꁶꂑꂮꃍꃢꄀꄚꄶꅑꅨꅽꆗꆷꇚꇸꈔꉆꉮꊍꊮꋐꋭꌉꌪꏠꏼꐘꐱꑊꑝꑱꀁꀗꀹꁗꁷꂒꂯ'   
            + 'ꃎꃣꄁꄛꄷꅒꅩꅾꆘꆸꇛꇹꈕꉇꊎꊯꋑꋮꌊꌫꏡꏽꐙꐲꑋꑞꑲꀂꀘꀺꁘꁸꂓꂰꃏꃤꄂꄜꄸꅓꅪꅿꆙꆹꇜꇺ' 
            + 'ꈖꉈꊏꊰꋒꋯꌋꌬꏢꏾꐚꐳꑌꑟꑳꀃꀙꀻꁙꁹꂔꂱꃐꃥꄃꄝꄹꅔꅫꆀꆚꆺꇝꇻꉉꊐꊱꋓꋰꌌꌭꏣꏿꐛꐴꑍ' 
            + 'ꑠꑴꀄꀚꁚꃦꅬꆻꇞꉊꊲꋔꏤꐀꐜꐵꑎꑡꑵꀅꀛꀼꁛꁺꂕꂲꃧꄄꄞꄺꅕꅭꆁꆛꆼꇟꇼꈗꈰꉋꉝꉯꊑꊳꋕꋱ'
            + 'ꌍꌮꏥꐁꐝꐶꑏꑢꑶꀆꀜꀽꁜꁻꂖꂳꃨꄅꄟꄻꅖꅮꆂꆜꆽꇠꇽꈘꈱꉌꉞꉰꊒꊴꋖꋲꌎꌯꏦꐂꐞꐷꑐꑣꑷꀇ'
            + 'ꀝꀾꁝꁼꂗꂴꃩꄆꄠꄼꅯꆃꆝꆾꇡꇾꈙꉍꉟꊓꊵꋗꋳꌏꌰꏧꐃꐟꐸꑑꑤꑸꀈꀞꀿꁞꁽꂘꂵꃑꃪꄇꄡꄽꅗꅰ' 
            + 'ꆞꆿꇢꇿꈚꈲꉎꉠꉱꊀꊔꊶꋘꋴꌐꌱꍆꍡꎔꎫꏆꀉꀟꁀꁟꁾꂙꂶꃒꃫꄈꄢꄾꅘꅱꆄꆟꇀꇣꈀꈛꈳꉏꉡꉲꊁ' 
            + 'ꊕꊷꋙꋵꌑꌲꍇꍢꍼꎕꎬꏇꀊꀠꁁꁠꁿꂚꂷꃓꃬꄉꄣꄿꅙꅲꆅꆠꇁꇤꈁꈜꈴꉐꉢꉳꊂꊖꊸꋚꋶꌒꌳꍈꍣꍽ'
            + 'ꎖꎭꏈꀋꀡꁂꁡꂀꂛꂸꃔꃭꄊꄤꅀꅚꅳꆆꆡꇂꇥꈂꈝꈵꉑꉣꉴꊃꊗꊹꋛꋷꌓꌴꍉꍤꎗꎮꏉꂹꄥꇃꇦꈞꉒꉤ' 
            + 'ꉵꍥꏨꐄꑹꀌꀢꁃꁢꂜꂺꄋꄦꅁꅴꆇꆢꇄꇧꈃꈟꈶꉓꉥꉶꊄꊘꊺꋸꌔꍊꍦꍾꎯꏊꏩꐅꐠꐹꑒꑥꑺꀍꀣꁄꁣ'
            + 'ꂝꂻꄌꄧꅂꅵꆈꆣꇅꇨꈄꈠꈷꉔꉦꉷꊅꊙꊻꋹꌕꍋꍧꍿꎰꏋꏪꐆꐡꐺꑓꑦꑻꀎꀤꁅꁤꂞꂼꄨꅃꆉꆤꇆꇩꈅ' 
            + 'ꈡꈸꉕꉸꊆꊚꊼꌖꍌꍨꎱꏌꏫꐇꐢꑔꑼꀏꀥꁆꁥꂁꂟꂽꃮꄍꄩꅄꅛꅶꆊꇇꇪꈆꈢꈹꉖꉧꉹꊛꊽꌗꌵꍍꍩꎀ' 
            + 'ꎲꏍꏬꐈꐣꐻꑕꑧꑽꀐꀦꁇꁦꂂꂠꂾꃕꃯꄎꄪꅅꅜꅷꆋꆥꇈꇫꈇꈣꈺꉗꉨꉺꊇꊜꊾꋜꋺꌘꌶꍎꍪꎁꎘꎳꏎ' 
            + 'ꏭꐉꐤꐼꑖꑨꑾꀑꀧꁈꁧꂃꂡꂿꃖꃰꄏꄫꅆꅝꆌꆦꇉꇬꈈꈤꈻꉘꉩꉻꊈꊝꊿꋝꌙꌷꍏꍫꎂꎙꎴꏏꏮꐊꐥꐽ'
            + 'ꑗꑩꑿꀒꀨꁉꁨꂄꂢꃀꃗꃱꄐꄬꅇꅞꅸꆍꆧꇊꇭꈉꈥꈼꉙꉪꉼꊉꊞꋀꋞꋻꌚꌸꍐꍬꎃꎚꎵꏐꏯꐋꐦꐾꑘꑪ' 
            + 'ꒀꇮꈊꈦꍑꍭꎄꎛꎶꀓꀩꁩꃁꃲꄑꄭꅈꅟꅹꆎꆨꇋꇯꈋꈧꈽꉚꉫꉽꊊꊟꋁꋟꋼꌛꌹꍒꍮꎅꎜꎷꏑꀔꀪꁪꃂ'
            + 'ꄒꄮꅉꅠꅺꆏꆩꇌꇰꈌꈨꈾꉛꉬꉾꊋꊠꋂꋠꋽꌜꌺꍓꍯꎆꎝꎸꏒꀫꁫꃳꄓꄯꅊꅡꅻꆐꆪꇍꇱꈍꈩꈿꉜꉭꉿ' 
            + 'ꊌꊡꋃꋡꌝꌻꍔꍰꎇꎞꎹꏓꀬꁊꁬꂅꂣꃃꃘꃴꄔꄰꅋꅢꅼꆑꆫꇎꇲꈎꈪꉀꊢꋄꌞꌼꍕꎈꎟꎺꏔꏰꐌꐧꑙꒁ'
            + 'ꀭꁋꁭꂆꂤꃄꃙꃵꄕꄱꅌꅣꆒꆬꇏꇳꈏꈫꉁꊣꋅꋢꋾꌟꌽꍖꍱꎉꎠꎻꏕꏱꐍꐨꐿꑚꒂꀮꁌꁮꂇꂥꃅꃚꃶꄖ' 
            + 'ꄲꅍꅤꆓꆭꇐꇴꈐꈬꉂꊤꋆꋣꋿꌠꌾꍗꍲꎊꎡꎼꏖꏲꐎꐩꑀꑛꒃꀯꁍꁯꂈꂦꃆꃛꃷꄗꄳꅎꅥꆔꆮꇑꇵꈑꈭ' 
            + 'ꉃꊥꋇꋤꌀꌡꌿꍘꍳꎋꎢꎽꏗꏳꐏꐪꑁꑜꒄꀰꁎꁰꂉꂧꃇꃜꃸꄘꄴꅏꅦꆕꆯꇒꇶꈒꈮꉄꊦꋈꋥꌁꌢꍙꍴꎌ' 
            + 'ꎣꎾꏘꏴꐐꐫꑂꒅꀱꁏꁱꂊꂨꃈꃝꃹꄙꄵꅐꅧꆖꆰꇓꇷꈓꈯꉅꊧꋉꋦꌂꌣꍚꍵꎍꎤꎿꏙꏵꐑꐬꑃꒆꀲꁐꁲ' 
            + 'ꂋꃉꃞꃺꆱꇔꊨꋊꋧꌃꌤꍀꍛꍶꎎꎥꏀꏚꏶꐒꐭꑄꑫꒇꀳꁑꁳꂌꂩꃊꃟꃻꆲꇕꊩꋋꋨꌄꌥꍁꍜꍷꎏꎦꏁꏛ' 
            + 'ꏷꐓꐮꑅꑬꒈꀴꁒꁴꂍꂪꃋꃠꃼꆳꇖꊪꋌꋩꌅꌦꍂꍝꍸꎐꎧꏂꏜꏸꐔꐯꑆꑭꒉꀵꁓꁵꂎꂫꃌꃡꃽꆴꇗꊫꋍ'
            + 'ꋪꌆꌧꍃꍞꍹꎑꎨꏃꏝꏹꐕꐰꑇꑮꒊꀶꁔꂏꂬꃾꆵꇘꊬꋎꋫꌇꌨꍄꍟꍺꎒꎩꏄꏞꏺꐖꑈꑯꒋꀷꁕꂐꂭꃿꆶ'
            + 'ꇙꊭꋏꋬꌈꌩꍅꍠꍻꎓꎪꏅꏟꏻꐗꑉꑰꒌ';
        }
        // 汉字
        function getChineseCharacterSet() {
            return "一丁七万三上下不丑且丘丙中丰丹乃之乎乘乙九乳事二于"
            + "云五井亘亡亥亦京人今介从令以任企伊伏伐休何余俘保允元兄先光克兔"
            + "入八公六兮共其典兹册冬凡出刀分刖初利力勹匕化北十千午南卜卯印即" 
            + "去又及取受口召可史右各合吉名向君吹告周咸品唐唯商喜嘉四因囿圉"
            + "土在壬夕夙多大天夫夷奚奠女好如妣妥妹妻妾姬娥子季宀它宅安宗"
            + "官宜宣室宫小少尸尹山川州工巫己巳帚帝年并幽庚弓弗彘彝彭往征得御" 
            + "宰家寅寮射尊微心恒戈戊戍成我戒户才承折攴攸改敦文斗新方旁旅旋族" 
            + "日旦旨旬昃明昏易昔星暮曾月有朋服朕木未析枚柳桑楚止正步武死母每"
            + "毓比水永沈河泉洹涂涉涎火灾炎焚熊熹燮爵父爻爿牛牝牡牢牧犬率玉"
            + "王珏甘生用甫田甲申男畏疑癸登白百皿盂益目翌老耳聿肉肘育膏臣臧自" 
            + "相眉矢示祀祖祝祭禾秉秋穆立竹簋米羊羌美羞臬臭至舂舌舞般良若莽"
            + "萑蒿虎虹血行衣裘角言谷豆豕豚象豹赤身辛辟雪非食首高鬯鬼鹿麇麋麓" 
            + "追逐通遣邑郭酉酒采重阜降陟隹雀集雇雉雍雨雩黍鼎鼓龠";
        }

    </script>
</body>
<style>
    @font-face {
        font-family: '甲骨文';
        font-display: swap;
        src: url('https://cdn.jsdelivr.net/gh/Qiu-Weidong/blog/resources/fonts/FZJiaGW.TTF') format('truetype');
    }

    @font-face {
        font-family: '小篆';
        src: url('https://cdn.jsdelivr.net/gh/Qiu-Weidong/blog/resources/fonts/FZXZTFW.TTF');
    }

    @font-face {
        font-family: '大篆';
        font-display: swap;
        src: url('https://cdn.jsdelivr.net/gh/Qiu-Weidong/blog/resources/fonts/STFJinWDZFU.TTF');
    }
</style>

</html>

修改代码中被标注的部分，可以实现不同的效果。比如，要实现甲骨文的效果，就需要将 characterSet 设置为getChineseCharacterSet，然后将 fontName 设置为甲骨文。而如果要更换背景图片，则修改第21行的img.src为背景图片的url。要设置字号，则修改第16行的fontSize变量即可。
如果想要彩色的效果，只需要将第62行注释掉，并将第63行取消注释即可。