canvas手绘heike代码雨（代码瀑布）_代码雨图片-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_45774485/article/details/119824036

本文介绍了如何使用HTML5 Canvas实现炫酷的代码雨特效。作者通过详细注释的JavaScript代码展示了如何创建并平铺随机ASCII字符，形成不断下落的代码雨效果，背景为深色，字符颜色为绿色。代码中包含关键逻辑，如覆盖旧代码以保持清晰，以及随机重置代码行位置以产生层次感。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我想很多小伙伴可能听到黑客，就会想到下面这张图
在这里插入图片描述

图片来自百度，如有侵权，私信必删

心想后面这个代码雨很酷，很炫，由于学了canvas，闲不住，所以就有了我自己做的代码雨的效果了

在这里插入图片描述

代码里面有详细注释，如果实在有没看到逻辑的地方，可以评论或私信哦

（真的，我文化程度低，语言苍白，表述不了那么精确）

上代码：

<!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>codeRain</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        canvas {
            background-color: #111;
        }
        
        body {
            overflow: hidden;
        }
    </style>

</head>

<body>
    <canvas id="canvas"></canvas>
    <script>
        let c = document.getElementById("canvas");

        // 获取浏览器宽高
        let wid = window.innerWidth;
        let hei = window.innerHeight;
        // 画布宽高和浏览器相同
        c.width = wid;
        c.height = hei;

        let ctx = c.getContext('2d');
        // 设置文字大小
        let fontSize = 16;
        // 计算每行可以放多少个字，即多少列
        let col = Math.floor(wid / fontSize);
        // 保存文字在y轴上的坐标，这个是后面代码雨位置随机的关键
        let cpy = [];
        for (let i = 0; i < col; i++) {
            cpy[i] = 1;//这个取值，大家回头可以试试取不同值有什么效果，这是一个我还没解决的小bug
        }
        ctx.font = fontSize + "px 微软雅黑"
        draw();
        setInterval(draw, 100);
        function draw() {
            ctx.beginPath();
            ctx.fillStyle = "rgba(0,0,0,0.05)";
            ctx.fillRect(0, 0, wid, hei);
    		// 上面三行的代码的作用是一层层叠加一个半透明的矩形（大小和画布一样大），遮盖重复部分，达到新随机代码不会模糊的效果
            ctx.fillStyle = "#00cc33";
            for (let i = 0; i < col; i++) {
                let x = i * fontSize;
                let y = cpy[i] * fontSize;
                ctx.fillText(randomString(), x, y);
                if (y > hei && Math.random() > 0.98) { //这里random的作用是平铺完后，随机使某（i）一列的y坐标(cpy[i])为0，出现不同层次的效果
                    cpy[i] = 0;
                }
                cpy[i]++;
            }
        }

        function randomString() {//获取ASCII码100以内的随机代码
            let randomNum = parseInt(Math.random() * 100);
            return String.fromCharCode(randomNum);
        }
    </script>
</body>

</html>