用 canvas 监听 pointermove 事件缓存坐标，requestAnimationFrame 每帧用半透明黑层残影+连线重绘，控制数组长度防内存溢出，避免 CSS 缩放确保清晰流畅。
怎么让鼠标在 HTML 页面上拖出轨迹
直接用 canvas 捕获鼠标移动事件，实时画点或线段是最轻量、可控性最强的做法。CSS 动画或伪元素方案无法真正“记录轨迹”，只能做跟随光标的效果（比如小圆点贴着鼠标跑），不是你想要的“拖尾”或“画线”效果。
- 监听
mousemove事件，拿到event.clientX和event.clientY - 把每次坐标存进一个数组，长度限制在 50–100 点之间（防内存涨）
- 用
requestAnimationFrame每帧清空canvas并重绘整条轨迹（点连成线，或带透明度渐变） - 别用
setTimeout或高频setInterval，会导致掉帧或轨迹断开
为什么 pointermove 比 mousemove 更可靠
在触屏设备（如 iPad、Surface）或启用了 Windows Ink 的笔输入场景下，mousemove 可能不触发或坐标偏移；pointermove 是 W3C 标准的统一输入事件，兼容鼠标、触摸、触控笔，且自带 pressure 和 tiltX 等扩展属性。
- 注册事件时优先用
document.addEventListener('pointermove', handler) - 注意加
{ passive: false }，否则在某些移动端会静默失败 - 如果只需鼠标，
mousemove足够；但要做跨设备一致效果，必须切到pointermove
轨迹变淡/拖尾的关键：canvas 全局透明度不是靠 globalAlpha
很多人试过设 ctx.globalAlpha = 0.05 再循环画线，结果发现整条轨迹越来越亮——因为 canvas 不是“图层叠加”，而是像素直接混合。正确做法是：每次清空画布前，用半透明黑色矩形盖一层（模拟残影）。
ctx.fillStyle = 'rgba(0, 0, 0, 0.08)'; ctx.fillRect(0, 0, canvas.width, canvas.height);
- 这个值（0.08）越小，拖尾越长；超过 0.15 就容易糊成一片
- 不要用
clearRect()完全擦除，那是“无痕”效果 - 若想保留历史轨迹不衰减（比如画板功能），就别盖黑层，改用坐标数组 + 逐点绘制 + 透明度按索引递减
性能卡顿？检查这三点
鼠标轨迹动效卡，90% 是因为没控制好重绘节奏或数据结构。Canvas 本身不慢，慢的是逻辑。
立即学习“前端免费学习笔记（深入）”；
- 坐标数组用
push()+shift()，别用unshift()或splice(0, 1)，后者是 O(n) 时间复杂度 - 避免在
pointermove回调里直接调用draw()，必须节流——用requestAnimationFrame统一驱动渲染 - canvas 尺寸别用 CSS 缩放（如
width: 100%; height: 100%），要设原生canvas.width/canvas.height属性，否则像素拉伸导致模糊+掉帧
