要实现鼠标追随动画并带有动态拖尾效果，核心是用半透明色覆盖旧帧模拟残影，并记录鼠标历史位置按时间衰减绘制渐隐点；需适配高清屏、设置低透明度背景色、缓存N个坐标点、动态调整各点透明度与半径、用requestAnimationFrame驱动流畅绘制。
要实现鼠标追随动画并带有动态拖尾效果，核心思路是：不直接清空画布，而是用半透明色覆盖旧帧来模拟残影；同时记录鼠标历史位置，按时间衰减绘制多个渐隐的点或图形。
1. 设置Canvas与基础绘图环境
先获取Canvas上下文，并设置合适的画布尺寸和渲染质量：
- 用window.devicePixelRatio适配高清屏，避免模糊
- 将ctx.globalCompositeOperation = "source-over"保持默认（叠加模式）
- 关键一步：ctx.fillStyle = "rgba(0, 0, 0, 0.1)"——用低透明度黑色每次轻盖一层，形成自然拖尾
2. 缓存鼠标轨迹并控制拖尾长度
定义一个数组（如trail = []）存储最近N个坐标点，每次鼠标移动时推入新位置，并限制最大长度：
- 用event.clientX / clientY获取页面坐标，再通过canvas.getBoundingClientRect()转为画布坐标
- 例如保留30个点：trail.push({x, y}); if (trail.length > 30) trail.shift();
- 拖尾“长度”由点数决定，“衰减感”由绘制时的透明度/大小渐变实现
3. 动态绘制带衰减的拖尾节点
在动画循环中遍历trail，越靠后的点（越早记录）越透明、越小：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
- 设当前索引为i，总长为len，则透明度可设为(i / len) * 0.8 + 0.1
- 半径可设为Math.max(1, 4 - i * 0.1)，让头部大、尾部细
- 用ctx.beginPath(); ctx.arc(x, y, radius, 0, Math.PI * 2); ctx.fill();逐个绘制
4. 启动requestAnimationFrame动画循环
不要用setInterval，用requestAnimationFrame保证流畅性：
- 在mousemove事件中只更新轨迹数据，不绘图
- 动画函数内先ctx.fillRect(0, 0, width, height)（用半透背景色），再遍历绘制拖尾，最后画当前鼠标点
- 注意节流：高频移动下可用setTimeout防抖，或用时间戳判断最小间隔（如≥16ms）
不复杂但容易忽略细节：拖尾不是“画多条线”，而是用透明覆盖+历史点插值营造运动余韵。只要控制好透明度衰减节奏和轨迹采样密度，就能做出丝滑有质感的追随效果。
