解压神器

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>系统异常 - 怨气释放中</title>
    <style>
        body, html { margin: 0; padding: 0; width: 100%; height: 100%; background: #000; overflow: hidden; position: relative; }
        canvas { display: block; width: 100%; height: 100%; }
        .hint { position: absolute; width: 100%; text-align: center; bottom: 30px; color: #444; font-size: 12px; font-family: sans-serif; pointer-events: none; }
    </style>
</head>
<body>
<canvas id="c"></canvas>
<div class="hint">【正在对始作俑者实施精神降维打击...】</div>

<script>
    const canvas = document.getElementById('c');
    const ctx = canvas.getContext('2d');

    // 让画布完美适配手机屏幕
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    const textPool = "烦死了我要杀了你";
    const fontSize = 18;
    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.08)'; // 制造拖尾效果
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        ctx.fillStyle = '#ff1a1a'; // 纯正血红色
        ctx.font = 'bold ' + fontSize + 'px sans-serif';

        for (let i = 0; i < drops.length; i++) {
            const char = textPool[Math.floor(Math.random() * textPool.length)];
            ctx.fillText(char, i * fontSize, drops[i] * fontSize);

            if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
                drops[i] = 0;
            }
            drops[i]++;
        }
    }

    // 疯狂刷新频率
    setInterval(draw, 30);

    // 微信内置浏览器大小改变时自动自适应
    window.onresize = () => {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
    };
</script>
</body>
</html>