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

Meteor Shower 流星雨

Each meteor is a line from its head back along its own velocity vector. 每颗流星就是一条线:从头沿自己的速度方向往回画。

Canvas 2DLine segmentsAngle spread
Live demo实时演示

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

How it works原理拆解

The trail is not a stored path — it is a single lineTo computed as head minus direction times length, so a meteor is always exactly one straight segment. Angles cluster around 60 degrees with a small random spread, which is why the shower looks coherent. The list is filtered each frame to drop anything that has left the bottom. 拖尾不是记录的历史轨迹,而是用「头部 − 方向 × 长度」一次算出来的 lineTo,所以流星永远是一条直线段。角度集中在 60 度附近、带一点点随机偏移,整场雨才会有统一的走向。每帧过滤掉飞出底部的流星。

What to change可以改的地方

  • 1Widen the angle spread to 0.4 rad for a scattered shower, or tighten it to 0.05 for a meteor storm.
  • 2Randomise lineWidth per meteor to fake depth.
  • 1角度随机范围放宽到 0.4 弧度是散乱的流星雨,收到 0.05 就是流星暴。
  • 2给每颗随机 lineWidth,能伪造出远近层次。

Source code源码

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

meteors.html