✨Effect Lab
Read the full guide完整技术长文 Fake 3D on a flat canvas在平面画布上伪造 3D
🌟

Warp Starfield 星空穿梭

Every star has a depth value, and dividing its position by that depth is the entire perspective camera. 每颗星带一个深度值,位置除以深度——这就是完整的透视相机。

Canvas 2DPseudo-3DDivide by z
Live demo实时演示

Runs live on this page. Move the pointer, click, or drag — whichever the effect listens for. 就在本页实时运行。移动鼠标、点击或拖拽——看它响应哪一种。

How it works原理拆解

Stars store an offset from centre plus a z between 0.1 and 2. The screen position is cx + x/z, so halving z doubles the distance from centre — that is genuine perspective divide, not a scaling animation. When z drifts below zero the star respawns at z=2, which is why the field never empties. 星星存的是相对中心的偏移量和一个 0.1–2 之间的 z。屏幕坐标是 cx + x/z,所以 z 减半、离中心距离就翻倍,这是真正的透视除法,不是放大动画。z 掉到 0 以下就在 z=2 重生,所以星空永远不会空。

What to change可以改的地方

  • 1Increase the z decrement for a faster warp speed.
  • 2Draw a short line from the previous position to the current one for motion streaks instead of dots.
  • 1加大每帧的 z 递减量,跃迁速度立刻变快。
  • 2从上一帧位置到当前位置画一条短线,点就变成速度线。

Source code源码

Self-contained — paste it into any HTML file and it runs. No libraries. 完全独立——粘进任意 HTML 文件就能跑,不需要任何库。

starfield.html