写一个鼠标拖尾特效

思路和逻辑

要实现鼠标拖尾特效,我们需要:

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

分析

为了实现上述思路,我们需要:

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

代码块

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

javascript 复制代码
// 获取画布元素和上下文
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 代码:

html 复制代码
<!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>

请注意,在上面的代码中,我们假设 mouseXmouseY 变量已经被定义并更新为鼠标的当前位置。通常情况下,你需要在 handleMouseMove 函数中更新这些变量的值。

相关推荐
小小小小宇5 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊5 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习6 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖6 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖6 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水6 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐6 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06277 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台7 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue
灿灿121387 小时前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css