代码雨教程简单代码

<!DOCTYPE html> <html> <head> <style> body {  margin: 0; overflow: hidden; background: black; } canvas {  display: block; } </style> </head> <body> <canvas id="matrix"></canvas> <script> const canvas = document.getElementById('matrix'); const ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; const fontSize = 16; let columns = canvas.width / fontSize; let drops = []; for (let i = 0; i < columns; i++) {  drops[i] = 1; } const chars = 'アイウエオカキクケコサシスセソタチツテトナニヌネノ0123456789ABCDEF'; function draw() {  ctx.fillStyle = 'rgba(0,代码单代 0, 0, 0.05)'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = '#0f0'; ctx.font = fontSize + 'px monospace'; for (let i = 0; i < drops.length; i++) {  const text = chars[Math.floor(Math.random() * chars.length)]; ctx.fillText(text, i * fontSize, drops[i] * fontSize); if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {  drops[i] = 0; } drops[i]++; } } setInterval(draw, 50); </script> </body> </html> 

复制这段代码存成 `.html` 文件，双击打开，雨教满屏绿字就开始往下砸了。程简整个过程不到三十行，代码单代核心逻辑就两个：一个画布，雨教一个定时器。程简 代码雨这东西，代码单代视觉效果很唬人，雨教原理简单得让人发笑。程简每一列字符其实就是代码单代一个不断往下移动的坐标点。`drops` 数组里存的雨教是每列当前字符的垂直位置，初始值全是程简1。每隔50毫秒，代码单代程序清一次屏，雨教然后在每个坐标点上随机画一个字符，程简再把坐标加1。清屏时用的不是纯黑色，而是带透明度的黑色（`rgba(0,0,0,0.05)`），这样上一帧的字符不会立刻消失，而是慢慢淡出，形成拖尾效果。没有这层半透明，代码雨就变成普通的下落文字了，毫无流动感。 有个细节容易忽略：列宽是 `canvas.width / fontSize` 算出来的，窗口多大，列数就自动适应多少。但你手动拉伸浏览器窗口时，`canvas.width` 不会自己变，代码雨会缩在原来的尺寸里，右边留出一大片空白。解决办法很简单，加个 `window.onresize` 事件重置宽高，但新手容易漏掉这一步，结果全屏时露馅。 随机字符用的是日文片假名加数字字母，这纯粹是装酷。想换成二进制01或者中文乱码都行，只要改 `chars` 变量里的内容。我试过把片假名全换成 “404” 三个数字，效果像黑客帝国里混进了程序员吐槽。还有个土办法能增强氛围：把字体调成 `monospace`，等宽字体保证每个字符占的宽度一致，不然列对齐会歪七扭八。 最坑的是性能。`setInterval` 每50毫秒跑一次，电脑风扇就开始响了。要优化就把间隔拉到100毫秒，或者用 `requestAnimationFrame` 代替，但那是进阶玩法，新手先跑起来再说。我见过有人直接把间隔设成10毫秒，结果浏览器直接卡死，页面白屏——别问我是怎么知道的。 代码雨这玩意儿，写一次就腻了。但每次看到绿色字符往下淌，总有种赛博朋克式的安心感。要是你想让雨滴有快有慢，或者让某些字符变成红色，那得再加几行逻辑，今天的教程到此为止。够玩就行。