黑客帝国代码雨的实现
生活随笔
收集整理的這篇文章主要介紹了
黑客帝国代码雨的实现
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
效果預(yù)覽
從上至下，依次是阿拉伯語(yǔ)、甲骨文、日語(yǔ)、彝語(yǔ)、藏語(yǔ)、希伯來(lái)語(yǔ)、 小篆、印地語(yǔ)、大篆、西里爾字母。
gif預(yù)覽
具體代碼
<!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>黑客帝國(guó)代碼雨效果實(shí)現(xiàn)</title> </head><body><script>const Arab = '??????????????????????????????'; // 阿拉伯語(yǔ)const Hebrew = '??????????????????????????????????????????????'; // 希伯來(lái)語(yǔ)const Hindi = '???????????????????????????????'+'?????????????????????????????????'; // 印地語(yǔ)const Japanese = 'あいうえおアイウエオかきくけこカキクケコさし'+'すせそサシスセソたちつてとタチツテトなにぬねのナニヌネノは'+'ひふへほハヒフヘホまみむめもマミムメモやゆよヤユヨらりるれ'+'ろラリルレロわゐゑをワヰヱヲんンがぎぐげごガギグゲゴざじず'+'ぜぞザジズゼゾだぢづでどダヂヅデドばびぶべぼバビブベボぱぴ'+'ぷぺぽパピプペポ'; // 日語(yǔ)const Cyrillic = '?Ё??????????????АБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪ'+'ЫЬЭЮЯабвгдежзийклмнопрстуфхцчшщъыьэюя?ё????????????????????'+'????????????????????????????????????????????????????????????????'+'???????????????????????????????????????????????????????????'+'???????????????????????????????'; // 西里爾字母const Tibetan = '??????????????????????????????'; // 藏語(yǔ)const Yi = '??????????????????????????????????????????' + '??????????????????????????????????????????????' + '??????????????????????????????????????????????' + '??????????????????????????????????????????????'+ '??????????????????????????????????????????????'+ '??????????????????????????????????????????????' + '??????????????????????????????????????????????' + '??????????????????????????????????????????????'+ '??????????????????????????????????????????????' + '??????????????????????????????????????????????'+ '??????????????????????????????????????????????' + '??????????????????????????????????????????????' + '??????????????????????????????????????????????' + '??????????????????????????????????????????????'+ '??????????????????????????????????????????????' + '??????????????????????????????????????????????'+ '??????????????????????????????????????????????' + '??????????????????????????????????????????????'+ '??????????????????????????????????????????????' + '??????????????????????????????????????????????' + '??????????????????????????????????????????????' + '??????????????????????????????????????????????' + '??????????????????????????????????????????????' + '??????????????????????????????????????????????'+ '??????????????????????????????????????????????'+ '??????????????????'; // 彝語(yǔ)const Chinese = "一丁七萬(wàn)三上下不丑且丘丙中豐丹乃之乎乘乙九乳事二于"+ "云五井亙亡亥亦京人今介從令以任企伊伏伐休何余俘保允元兄先光克兔"+ "入八公六兮共其典茲冊(cè)冬凡出刀分刖初利力勹匕化北十千午南卜卯印即" + "去又及取受口召可史右各合吉名向君吹告周咸品唐唯商喜嘉四因囿圉"+ "土在壬夕夙多大天夫夷奚奠女好如妣妥妹妻妾姬娥子季宀它宅安宗"+ "官宜宣室宮小少尸尹山川州工巫己巳帚帝年并幽庚弓弗彘彝彭往征得御" + "宰家寅寮射尊微心恒戈戊戍成我戒戶才承折攴攸改敦文斗新方旁旅旋族" + "日旦旨旬昃明昏易昔星暮曾月有朋服朕木未析枚柳桑楚止正步武死母每"+ "毓比水永沈河泉洹涂涉涎火災(zāi)炎焚熊熹燮爵父爻爿牛牝牡牢牧犬率玉"+ "王玨甘生用甫田甲申男畏疑癸登白百皿盂益目翌老耳聿肉肘育膏臣臧自" + "相眉矢示祀祖祝祭禾秉秋穆立竹簋米羊羌美羞臬臭至舂舌舞般良若莽"+ "萑蒿虎虹血行衣裘角言谷豆豕豚象豹赤身辛辟雪非食首高鬯鬼鹿麇麋麓" + "追逐通遣邑郭酉酒采重阜降陟隹雀集雇雉雍雨雩黍鼎鼓龠";const width = window.innerWidth;const height = window.innerHeight;const fontSize = 20; // 修改這里可以設(shè)置字號(hào)const fontName = 'arial'; // 修改這里可以設(shè)置字體，如'甲骨文'、'小篆'、'大篆'const characterSet = Arab; // 修改這里可以設(shè)置字符集let img = document.createElement('img');// 修改這里可以修改背景圖片img.src = 'https://cdn.jsdelivr.net/gh/Qiu-Weidong/pictures/images/hacker/hacker0.jfif'; 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";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);</script> </body> <style>@font-face {font-family: '甲骨文';font-display: swap;src: url('https://cdn.jsdelivr.net/gh/Qiu-Weidong/pictures/fonts/FZJiaGW.TTF') format('truetype');}@font-face {font-family: '小篆';font-display: swap;src: url('https://cdn.jsdelivr.net/gh/Qiu-Weidong/pictures/fonts/FZXZTFW.TTF');}@font-face {font-family: '大篆';font-display: swap;src: url('https://cdn.jsdelivr.net/gh/Qiu-Weidong/pictures/fonts/STFJinWDZFU.TTF');} </style></html>總結(jié)
以上是生活随笔為你收集整理的黑客帝国代码雨的实现的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： matlab条件and,matlaban
- 下一篇： MFC窗口程序