@fxshelf/starfield/docs/动效说明-专业.md

Canvas 2D starfield tunnel for React and Vue — perspective fly-through, glitter flashes, additive trails. Zero animation-lib deps. Copy-as-source friendly.

# Starfield — 动效说明（专业）

## 原理

框架无关的 Canvas 2D 粒子引擎 `createStarfield`：

1. 每颗星保存在极坐标近似的 `x,y` 与深度 `z`
2. 每帧沿 `z` 轴向镜头推进（或 `reverse` 时远离）
3. 透视：`screen = center + xy * (focalDepth / z) * projScale`
4. 擦除层用 `destination-out` 半透明矩形制造拖尾；绘制用 `lighter` 叠加发光
5. 可选 glitter：短时放大半径与 alpha，形成闪烁

## 性能

- 默认约 260 粒子，单次 `fillRect` / 可选 `stroke`，无纹理
- DPR 上限 2；`ResizeObserver` 跟随容器
- 卸载时取消 `requestAnimationFrame` 并断开观察器

## API

```ts
import { createStarfield } from '@fxshelf/starfield'

const field = createStarfield(canvas, { particleCount: 200 })
field.setOptions({ brightness: 80 })
field.destroy()
```