鼠标移动时粒子跟随光标移动(Javascript - Canvas)

鼠标移动时粒子跟随光标移动是一种常见的交互效果，可以通过使用JavaScript和Canvas来实现。

JavaScript是一种广泛应用于Web开发的脚本语言，它可以用于实现网页的动态效果和交互功能。Canvas是HTML5提供的一个绘图API，可以通过JavaScript来操作和绘制图形。

实现鼠标移动时粒子跟随光标移动的效果，可以按照以下步骤进行：

创建HTML页面，并在页面中添加一个Canvas元素，用于绘制粒子效果。

<canvas id="canvas"></canvas>

使用JavaScript获取Canvas元素，并设置其宽度和高度。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

创建一个Particle类，用于表示粒子，并实现其更新和绘制方法。

class Particle {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.radius = Math.random() * 2 + 1;
    this.opacity = 1;
    this.directionX = Math.random() * 2 - 1;
    this.directionY = Math.random() * 2 - 1;
  }

  update() {
    this.x += this.directionX;
    this.y += this.directionY;
    if (this.opacity > 0.1) {
      this.opacity -= 0.1;
    }
    if (this.radius > 0.1) {
      this.radius -= 0.1;
    }
  }

  draw() {
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
    ctx.fillStyle = `rgba(255, 255, 255, ${this.opacity})`;
    ctx.fill();
  }
}

创建一个数组来存储粒子，并在鼠标移动时添加新的粒子。

const particles = [];

function createParticles(e) {
  const x = e.clientX;
  const y = e.clientY;
  for (let i = 0; i < 5; i++) {
    particles.push(new Particle(x, y));
  }
}

canvas.addEventListener('mousemove', createParticles);

实现动画循环，更新和绘制粒子。

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  particles.forEach((particle, index) => {
    if (particle.opacity <= 0.1) {
      particles.splice(index, 1);
    } else {
      particle.update();
      particle.draw();
    }
  });
  requestAnimationFrame(animate);
}

animate();

通过以上步骤，就可以实现鼠标移动时粒子跟随光标移动的效果。

这种效果可以应用于网页的背景特效、鼠标指针特效等场景。在实际应用中，可以根据具体需求进行定制和优化。

腾讯云相关产品和产品介绍链接地址：