代码雨的效果-优快云博客

在这里插入图片描述
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>代码雨效果</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: black;
            overflow: hidden;
        }

        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 letters = '批量小王子ABCDEFGHIJKLMNOPQRSTUVWXYZ批量小王子abcdefghijklmnopqrstuvwxyz批量小王子0123456789!@#$%^&*()_+-=[]{}|;:\",./<>?';
        const letterArray = letters.split('');

        // 每个字符的大小
        const fontSize = 16;
        const columns = canvas.width / fontSize;

        // 每列的下落位置
        const drops = [];
        for (let x = 0; x < columns; x++) {
            drops[x] = 1;
        }

        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 = letterArray[Math.floor(Math.random() * letterArray.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, 33);

        // 窗口大小改变时更新画布大小
        window.addEventListener('resize', () => {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            drops.length = canvas.width / fontSize;
            for (let x = 0; x < drops.length; x++) {
                drops[x] = 1;
            }
        });
    </script>
</body>

</html>