黑客帝国代码雨效果-程序员茄子

代码黑客帝国代码雨效果

2024-11-19 01:49:31 +0800 CST views 563

#黑客帝国代码雨效果

该文本展示了一个实现代码雨效果的HTML页面。使用JavaScript在全屏画布上绘制随机字符，字符从上到下不断下落，形成动态效果。代码中包含了画布的初始化、字符集的定义、绘制函数以及动画的设置，适合用于学习Canvas和动画效果的实现。

、<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>代码雨效果</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: black;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="matrixCanvas"></canvas>
    <script>
// 获取画布和绘图上下文
const canvas = document.getElementById('matrixCanvas');
const ctx = canvas.getContext('2d');

// 设置画布全屏
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 当窗口大小改变时，调整画布尺寸
window.addEventListener('resize', () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
});

// 定义字符集，可以根据需要添加更多字符
const katakana = 'アァカサタナハマヤャラワガザダバパイィキシチニヒミリヰギジヂビピウゥクスツヌフムユュルグズヅブプエェケセテネヘメレヱゲゼデベペオォコソトノホモヨョロヲゴゾドボポヴッン';
const latin = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
const nums = '0123456789';

const alphabet = katakana + latin + nums;

// 每个字符的字体大小
const fontSize = 16;
// 计算列数 = 画布宽度 / 字体大小
const columns = Math.floor(canvas.width / fontSize);

// 用于存储每个列中字符的下落位置
const drops = [];
// 初始化每个列的起始位置
for (let x = 0; x < columns; x++) {
    drops[x] = canvas.height / fontSize;
}

// 绘制函数
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 = alphabet.charAt(Math.floor(Math.random() * alphabet.length));

        // 绘制字符，位置为 x = i * 字体大小, y = drops[i] * 字体大小
        ctx.fillText(text, i * fontSize, drops[i] * fontSize);

        // 让字符往下移动一格
        drops[i]++;

        // 重新随机重置下落位置，以制造持续下落的效果
        if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
            drops[i] = 0;
        }
    }
}

// 设置动画间隔，调用绘制函数
setInterval(draw, 33); // 大约每秒30帧

    </script>
</body>
</html>

images