🌌 动态视觉

粒子背景

使用 Canvas 和数学算法创造出梦幻般的粒子动画背景，为你的网页增添科技感与动感

向下滚动

核心特性

粒子系统的强大功能，让你的创意无限延伸

⚡

高性能渲染

使用 Canvas 2D API 和 requestAnimationFrame，确保在任何设备上都能流畅运行

🎯

智能连线

粒子之间根据距离自动建立连接，形成动态的网状结构

🖱️

鼠标交互

粒子会响应鼠标移动，跟随光标产生引力或斥力效果

🎨

自定义配色

支持自定义粒子颜色、大小、速度等参数，打造独特视觉效果

📱

响应式设计

自动适应窗口大小变化，在任何屏幕尺寸下都完美展示

🔧

轻量级实现

纯 JavaScript 实现，无需任何外部依赖，代码简洁高效

🎛️ 控制面板

粒子数量 100

连线距离 150

粒子速度 1.0

粒子颜色

技术实现

粒子系统的核心是通过数学计算模拟物理运动。每个粒子都有位置、速度和加速度属性，通过帧循环不断更新这些属性来实现动画效果。

Canvas 2D 渲染引擎
向量数学运算
碰撞检测算法
空间分区优化
缓动函数应用

// 粒子类定义
class Particle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.vx = random(-1, 1);
    this.vy = random(-1, 1);
    this.radius = 2;
  }

  update() {
    this.x += this.vx;
    this.y += this.vy;
  }

  draw(ctx) {
    ctx.beginPath();
    ctx.arc(this.x, this.y, 
      this.radius, 0, Math.PI * 2);
    ctx.fill();
  }
}
                    