Baobhan Sith
124 lines
4.4 KiB
HTML
124 lines
4.4 KiB
HTML
<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>
|