节流函数在canvas涂鸦中用于控制事件采样频率，避免点过密、性能下降或连线抖动；需兼顾时间间隔（如16ms）与距离阈值（如3px），确保线条连续且响应延迟≤30ms。
在 Canvas 涂鸦场景中，节流函数的核心作用不是“减少点数”，而是控制鼠标/触控事件的采样频率，避免高频触发导致采集点过密、性能下降或连线抖动。关键在于：节流后仍要保证线条连续、无断点，且响应延迟可接受（通常 ≤ 30ms）。
为什么涂鸦需要节流？不节流会怎样？
鼠标移动（mousemove）或触控移动（touchmove）在现代设备上每秒可触发 60–120+ 次。若每次都记录坐标并立即绘线：
- 短时间内生成大量冗余点（尤其匀速滑动时），增加内存与渲染压力；
- 频繁调用
ctx.lineTo()+ctx.stroke()可能引发掉帧； - 某些浏览器或低性能设备上，点位密度过高反而让线条显得“粘滞”或锯齿感增强。
节流策略：时间间隔 + 距离阈值双保险
纯时间节流（如 Lodash 的 throttle）在慢速拖动时可能导致点过少、线条断开。推荐结合距离判断：
- 设定基础节流间隔（如 16ms ≈ 60fps），保证最低采样率；
- 同时检查当前点与上一个**已采纳点**的距离，若 ≥ 2–4px，则立即采纳（突破节流限制），确保慢速转折不丢点；
- 代码结构示意：
let lastPoint = null;
let lastTime = 0;
const THROTTLE_MS = 16;
const MIN_DISTANCE = 3;
<p>function handleMove(x, y) {
const now = Date.now();
const dx = x - (lastPoint?.x || x);
const dy = y - (lastPoint?.y || y);
const dist = Math.sqrt(dx <em> dx + dy </em> dy);</p><p>if (now - lastTime >= THROTTLE_MS || dist >= MIN_DISTANCE) {
recordPoint(x, y); // 存入点数组或直接绘线
lastPoint = { x, y };
lastTime = now;
}
}</p>连线绘制：用 beginPath + lineTo 批量画，别逐点 stroke
节流后得到的是稀疏但关键的点序列。绘制时不要每个点都单独 stroke —— 那会破坏线条连贯性：
- 在
mousedown/touchstart时调用ctx.beginPath()； - 节流采纳的每个新点，只调用
ctx.lineTo(x, y)； - 在
mouseup/touchend时统一ctx.stroke()。 - 这样即使点变少，Canvas 仍用抗锯齿直线自动连接，视觉更平滑。
移动端特别注意：用 touchmove 并阻止默认行为
手机/平板上必须监听 touchmove，且需 e.preventDefault() 防止页面滚动干扰涂鸦：
- 获取触摸点用
e.touches[0].clientX/Y，转换为 canvas 坐标要减去canvas.getBoundingClientRect()偏移； - 节流逻辑与鼠标一致，但建议将
MIN_DISTANCE略调大（如 5px），适应手指触控精度； - 避免同时监听
mousemove和touchmove导致重复采样——可用'ontouchstart' in window判断环境。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
