为什么是黑洞？#

传统的 Live2D 看板娘（比如之前的 Pio）确实很可爱，但有时候我们可能更想要一种深邃、极客、充满科幻感的陪伴。黑洞作为宇宙中最神秘的存在之一，完美契合了这种氛围。

这个组件不仅是一个静态的动画，它还会与你互动：

• 🌌 鼠标追踪：黑洞的视界会随着你的鼠标轻微晃动，仿佛引力在和你捉迷藏。
• ✨ 点击坍缩：当你点击或按住它时，黑洞会加速旋转并发生“时空坍缩”效果，光晕收紧，核心爆发出高亮的色彩！
• 🚀 性能友好：我们通过精简几何测地线球体的顶点，并优化 Canvas 的绘制层级（Ring Bus 图层降至 8 层），让它在保持视觉精致感的同时，几乎不消耗你的 CPU 性能。

技术细节探秘#

整个黑洞其实是一个基于 Astro 和 HTML5 Canvas 2D 绘制的纯前端组件。没有依赖庞大的 WebGL 库（比如 Three.js），而是纯手写了 3D 到 2D 的投影算法。

核心的几何结构是一个 V3/Freq 4 的测地线球体，通过计算出 162 个绝对对称方向的点和线，然后在 requestAnimationFrame 中不断对这些几何线条进行旋转和缩放，再配合 Canvas 的 globalCompositeOperation = 'lighter' 混合模式，就产生了这种发光和深邃的视觉错觉。

1
---
2
title: 博客新玩具：交互式黑洞看板娘
3
published: 2026-05-27
4
updated: 2026-05-27
5
tags: [Astro, Canvas, UI, Animation]
6
category: Feature Updates
7
description: 给博客加了个好玩的黑洞看板娘，基于 Canvas 的交互式奇点动画，随时随地陪你探索代码宇宙的奥秘。
8
image: ""
9
draft: false
10
pinned: false
11
comment: true
12
lang: zh-CN
13
author: ""
14
---