🎨 Canvas 粒子动画

粒子系统是 Web 开发中非常有趣的效果之一。

什么是粒子系统

粒子系统由大量独立的小元素组成，每个元素都有自己的属性：

  • 位置 (x, y, z)
  • 速度
  • 颜色
  • 大小
  • 透明度

3D 粒子连线

通过矩阵旋转实现 3D 效果，粒子之间根据距离连线，营造出深邃的空间感。

1
2
3
4
5
6
7
8
9
10
11
// 粒子类核心代码
update() {
  // 更新角度
  this.angleX += this.rotSpeedX;
  this.angleY += this.rotSpeedY;
  
  // 3D 旋转矩阵
  let x = this.baseX, y = this.baseY, z = this.baseZ;
  // ... 旋转计算
  this.x = x; this.y = y; this.z = z;
}

鼠标靠近时粒子会被推开，产生互动感。