写一个鼠标拖尾特效

news2025/2/13 19:20:20

思路和逻辑

要实现鼠标拖尾特效，我们需要：

监听鼠标移动事件，获取鼠标的当前位置。
在每次鼠标移动时，绘制一个小圆点或其他形状在鼠标的当前位置。
将所有绘制的圆点连接起来，形成一条“尾巴”。
使用动画效果让尾巴看起来像是在跟随鼠标移动。

分析

为了实现上述思路，我们需要：

使用 JavaScript 和 HTML5 Canvas API 来绘制图形。
使用 requestAnimationFrame 函数来实现动画效果。
使用数组来存储所有绘制的圆点的位置。
在每一帧中，清除画布，重新绘制所有圆点，并更新圆点的位置。

代码块

以下是实现鼠标拖尾特效的关键代码块：

// 获取画布元素和上下文
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 设置画布大小
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

// 存储所有圆点的位置
let points = [];

// 鼠标移动事件处理函数
function handleMouseMove(event) {
  // 获取鼠标的当前位置
  const x = event.clientX;
  const y = event.clientY;

  // 将新圆点的位置添加到数组中
  points.push({ x, y });

  // 如果圆点数量超过限制，移除最老的圆点
  if (points.length > 100) {
    points.shift();
  }
}

// 动画循环函数
function animate() {
  // 清除画布
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // 绘制所有圆点
  for (let i = 0; i < points.length; i++) {
    const point = points[i];
    ctx.beginPath();
    ctx.arc(point.x, point.y, 5, 0, 2 * Math.PI);
    ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
    ctx.fill();
  }

  // 更新圆点的位置
  for (let i = 0; i < points.length; i++) {
    const point = points[i];
    point.x += (mouseX - point.x) * 0.1;
    point.y += (mouseY - point.y) * 0.1;
  }

  // 请求下一帧动画
  requestAnimationFrame(animate);
}

// 监听鼠标移动事件
document.addEventListener('mousemove', handleMouseMove);

// 启动动画循环
animate();

完整代码

以下是完整的 HTML 和 JavaScript 代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Mouse Drag Tail Effect</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        background-color: #333;
      }
      canvas {
        display: block;
      }
    </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;

      // 存储所有圆点的位置
      let points = [];

      // 鼠标移动事件处理函数
      function handleMouseMove(event) {
        // 获取鼠标的当前位置
        const x = event.clientX;
        const y = event.clientY;

        // 将新圆点的位置添加到数组中
        points.push({ x, y });

        // 如果圆点数量超过限制，移除最老的圆点
        if (points.length > 100) {
          points.shift();
        }
      }

      // 动画循环函数
      function animate() {
        // 清除画布
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // 绘制所有圆点
        for (let i = 0; i < points.length; i++) {
          const point = points[i];
          ctx.beginPath();
          ctx.arc(point.x, point.y, 5, 0, 2 * Math.PI);
          ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
          ctx.fill();
        }

        // 更新圆点的位置
        for (let i = 0; i < points.length; i++) {
          const point = points[i];
          point.x += (mouseX - point.x) * 0.1;
          point.y += (mouseY - point.y) * 0.1;
        }

        // 请求下一帧动画
        requestAnimationFrame(animate);
      }

      // 监听鼠标移动事件
      document.addEventListener('mousemove', handleMouseMove);

      // 启动动画循环
      animate();
    </script>
  </body>
</html>