js鼠标星星特效

在JavaScript中实现鼠标星星特效，通常是通过HTML5的Canvas元素结合JavaScript来绘制和动画处理星星。以下是这个特效涉及的基础概念、优势、类型、应用场景以及如何实现的基本步骤：

基础概念

Canvas API：HTML5提供的用于在网页上绘制图形的API。
JavaScript动画：通过定时器（如requestAnimationFrame）不断更新画布内容来实现动画效果。
事件监听：使用JavaScript监听鼠标移动事件（mousemove），以获取鼠标在页面上的位置。

优势

交互性强：能够根据用户的鼠标移动实时响应，提供良好的用户体验。
视觉效果好：星星特效可以增加网页的趣味性和美观度。
灵活性高：可以通过调整参数轻松改变特效的外观和行为。

类型

固定星星背景：页面加载时就生成星星，鼠标移动时星星围绕鼠标旋转或发光。
动态生成星星：随着鼠标的移动动态在画布上生成星星。

应用场景

游戏网站：增加游戏的神秘感和吸引力。
个人主页：个性化装饰，展示独特风格。
活动宣传页：吸引用户注意力，提升页面互动性。

实现步骤

设置Canvas：在HTML中添加Canvas元素，并通过CSS设置其覆盖整个页面。
初始化星星：在JavaScript中创建星星对象数组，每个星星有位置、大小、亮度等属性。
绘制星星：使用Canvas API的绘图方法绘制每个星星。
动画循环：使用requestAnimationFrame创建动画循环，不断更新星星的位置和状态。
响应鼠标移动：监听mousemove事件，根据鼠标位置调整星星的动画效果。

示例代码

以下是一个简单的鼠标星星特效实现示例：

<canvas id="starCanvas"></canvas>
<script>
const canvas = document.getElementById('starCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

class Star {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.size = Math.random() * 3 + 1;
    this.brightness = Math.random();
  }
  draw() {
    ctx.beginPath();
    for (let i = 0; i < 5; i++) {
      ctx.lineTo(
        this.x,
        this.y - this.size * (i === 0 ? 0 : 1.5 - 0.3 * i)
      );
      ctx.lineTo(
        this.x + this.size * (i === 0 ? 1 : 0.5 - 0.3 * i),
        this.y - this.size * (i === 0 ? 0.5 : 1 - 0.3 * i)
      );
    }
    ctx.closePath();
    ctx.fillStyle = `rgba(255, 255, 255, ${this.brightness})`;
    ctx.fill();
  }
}

let stars = [];
for (let i = 0; i < 100; i++) {
  stars.push(new Star(Math.random() * canvas.width, Math.random() * canvas.height));
}

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  stars.forEach(star => star.draw());
  requestAnimationFrame(animate);
}
animate();

canvas.addEventListener('mousemove', (e) => {
  stars.forEach(star => {
    let dx = e.clientX - star.x;
    let dy = e.clientY - star.y;
    let distance = Math.sqrt(dx * dx + dy * dy);
    star.brightness = Math.max(0, 1 - distance / 100);
  });
});
</script>

这段代码创建了一个简单的星星特效，星星会根据鼠标的位置改变亮度，形成跟随鼠标的视觉效果。你可以根据需要调整星星的数量、大小、亮度变化范围等参数，以达到理想的视觉效果。