js鼠标跟随粒子

在JavaScript中实现鼠标跟随的粒子效果，通常涉及到HTML5的Canvas API来绘制粒子，并使用JavaScript来更新粒子的位置，使其跟随鼠标移动。以下是这个效果的基础概念、优势、类型、应用场景以及实现方法：

基础概念

Canvas API: HTML5提供的用于在网页上绘制图形的接口。
粒子系统: 由大量微小的粒子组成的系统，每个粒子都有自己的属性，如位置、速度、大小、颜色等。
鼠标事件: 如mousemove，用于获取鼠标在页面上的位置。

优势

视觉吸引力: 粒子效果可以创造出流畅、动态的视觉效果，增强用户体验。
交互性: 鼠标跟随效果增加了页面的交互性，使用户感觉更加参与。
灵活性: 粒子系统可以轻松调整参数，创造出不同的视觉效果。

类型

自由流动粒子: 粒子在屏幕上自由移动，不受鼠标影响。
鼠标吸引粒子: 粒子被鼠标位置吸引，形成围绕鼠标的流动效果。
鼠标拖拽粒子: 粒子直接跟随鼠标移动，形成拖拽效果。

应用场景

网站背景: 为网站背景添加动态粒子效果，提升视觉效果。
游戏开发: 在游戏中作为特效使用，如魔法效果、爆炸效果等。
数据可视化: 用于表示数据的流动或分布。

实现方法

以下是一个简单的鼠标跟随粒子效果的实现示例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mouse Follow Particles</title>
<style>
  canvas {
    display: block;
    background: #000;
  }
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

class Particle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.vx = Math.random() * 2 - 1;
    this.vy = Math.random() * 2 - 1;
    this.size = Math.random() * 3 + 1;
    this.color = `rgba(255, 255, 255, ${Math.random()})`;
  }

  update(mouse) {
    let dx = mouse.x - this.x;
    let dy = mouse.y - this.y;
    let distance = Math.sqrt(dx * dx + dy * dy);
    let forceDirectionX = dx / distance;
    let forceDirectionY = dy / distance;
    let force = (2000 - distance) / 2000;
    let directionX = forceDirectionX * force * 0.6;
    let directionY = forceDirectionY * force * 0.6;

    if (distance < 100) {
      this.vx -= directionX;
      this.vy -= directionY;
    }

    this.x += this.vx;
    this.y += this.vy;

    if (this.size > 0.2) this.size -= 0.1;
  }

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

let particles = [];
let mouse = { x: undefined, y: undefined };

canvas.addEventListener('mousemove', (event) => {
  mouse.x = event.x;
  mouse.y = event.y;
});

canvas.addEventListener('mouseout', () => {
  mouse.x = undefined;
  mouse.y = undefined;
});

function init() {
  particles = [];
  for (let i = 0; i < 100; i++) {
    let x = Math.random() * canvas.width;
    let y = Math.random() * canvas.height;
    particles.push(new Particle(x, y));
  }
}

function animate() {
  requestAnimationFrame(animate);
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  particles.forEach((particle, index) => {
    if (particle.size <= 0.3) {
      particles.splice(index, 1);
      particles.push(new Particle(Math.random() * canvas.width, Math.random() * canvas.height));
    }
    particle.update(mouse);
    particle.draw();
  });
}

init();
animate();

window.addEventListener('resize', () => {
  canvas.width = window.innerWidth;
  canvas.height = window.innerHeight;
  init();
});
</script>
</body>
</html>