Update test.html

2025-05-27 13:59:22 +08:00
parent 178b3ab766
commit fdad73d304
1 changed files with 123 additions and 1 deletions
@@ -1 +1,123 @@
-<h1>test</h1>
+<style>
+    #matrix-rain-container {
+        width: 100%; height: 100%; background: #000;
+        overflow: hidden; position: relative;
+    }
+    #matrix-canvas { display: block; position: absolute; top: 0; left: 0; }
+</style>
+<div id="matrix-rain-container">
+    <canvas id="matrix-canvas"></canvas>
+</div>
+<script>
+(function() {
+    const canvas = document.getElementById('matrix-canvas');
+    const layerElement = canvas.closest('.terminal-custom-html-layer'); // Or document.body if not in that specific env
+    if (!canvas || !layerElement) {
+        console.error("Canvas or layerElement not found.");
+        return;
+    }
+    const ctx = canvas.getContext('2d');
+    let animationFrameId;
+    const characters = 'アァカサタナハマヤャラワABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
+    const fontSize = 14;
+    let columns, drops = [];
+
+    // --- Slowdown Configuration ---
+    const slowdownFactor = 10; // 数字越大，动画越慢 (例如 2 = 半速, 3 = 1/3速度)
+    const originalAlpha = 0.1; // 原始的背景淡出alpha值
+
+    // 计算调整后的alpha值，以保持拖尾视觉效果
+    // 如果 slowdownFactor 为 1, adjustedAlpha 等于 originalAlpha
+    // (1 - newAlpha)^slowdownFactor = (1 - originalAlpha)^1
+    // 1 - newAlpha = (1 - originalAlpha)^(1/slowdownFactor)
+    // newAlpha = 1 - (1 - originalAlpha)^(1/slowdownFactor)
+    const adjustedAlpha = slowdownFactor <= 1 ? originalAlpha : 1 - Math.pow(1 - originalAlpha, 1 / slowdownFactor);
+
+    let frameCounter = 0; // 用于控制逻辑更新频率的计数器
+    // --- End Slowdown Configuration ---
+
+
+    function setupDimensionsAndColumns() {
+        canvas.width = layerElement.offsetWidth;
+        canvas.height = layerElement.offsetHeight;
+        columns = Math.floor(canvas.width / fontSize);
+        drops = [];
+        for (let x = 0; x < columns; x++) {
+            drops[x] = 1 + Math.floor(Math.random() * (canvas.height / fontSize));
+        }
+        frameCounter = 0; // 重置帧计数器
+    }
+
+    function drawMatrix() {
+        if (!ctx || canvas.width === 0 || canvas.height === 0) {
+            animationFrameId = requestAnimationFrame(drawMatrix);
+            return;
+        }
+
+        // 背景淡出效果：每一帧都执行，使用调整后的alpha值
+        ctx.fillStyle = `rgba(0, 0, 0, ${adjustedAlpha})`;
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+        frameCounter++;
+
+        // 只有当帧计数器达到 slowdownFactor 时，才更新雨滴逻辑和绘制字符
+        if (frameCounter >= slowdownFactor) {
+            frameCounter = 0; // 重置计数器
+
+            ctx.fillStyle = '#0F0'; // 雨滴颜色
+            ctx.font = fontSize + 'px monospace';
+
+            for (let i = 0; i < drops.length; i++) {
+                const text = characters.charAt(Math.floor(Math.random() * characters.length));
+                ctx.fillText(text, i * fontSize, drops[i] * fontSize);
+
+                // 如果雨滴超出画布底部，并且随机条件满足，则重置雨滴到顶部
+                if (drops[i] * fontSize > canvas.height && Math.random() > 0.975) {
+                    drops[i] = 0;
+                }
+                drops[i]++; // 雨滴下落
+            }
+        }
+        animationFrameId = requestAnimationFrame(drawMatrix);
+    }
+
+    const debounce = (func, delay) => {
+        let t;
+        return (...a) => {
+            clearTimeout(t);
+            t = setTimeout(() => func.apply(this, a), delay);
+        };
+    };
+
+    const debouncedReinitialize = debounce(() => {
+        if (animationFrameId) {
+            cancelAnimationFrame(animationFrameId);
+        }
+        setupDimensionsAndColumns();
+        if (columns > 0) {
+            drawMatrix();
+        }
+    }, 250);
+
+    // 确保 layerElement 存在才进行监听
+    if (layerElement) {
+        const resizeObserver = new ResizeObserver(entries => {
+            entries.forEach(entry => {
+                if (entry.target === layerElement) {
+                    debouncedReinitialize();
+                }
+            });
+        });
+        resizeObserver.observe(layerElement);
+    } else {
+        // Fallback if layerElement is not specific, e.g. observe window or body
+        // window.addEventListener('resize', debouncedReinitialize); // Example fallback
+        console.warn("layerElement not found for ResizeObserver, resize handling might be limited.");
+    }
+
+    setupDimensionsAndColumns();
+    if (columns > 0) {
+        drawMatrix();
+    }
+})();
+</script>