mousedown中必须调用beginpath()并配合moveto(x,y)定位起点，否则路径自动连接导致跳笔；mousemove需用requestanimationframe节流并维护lastx/lasty坐标，避免从(0,0)连线；mouseup时调用closepath()。
mousedown 事件里必须调用 beginPath()
不调用 beginPath()，每次 mousemove 绘制的线段会自动连接前一次路径终点，导致“跳笔”或意外连线。尤其在清空画布后继续画，旧路径残留会突然浮现。
实操建议：
- 在
mousedown回调开头立即执行ctx.beginPath() - 紧接着用
ctx.moveTo(x, y)定位起始点，这里的(x, y)是鼠标按下时的坐标 - 不要在
mousemove中重复调用beginPath()，否则每移动一像素都开新路径，画不出连续线
mousemove 事件需节流且依赖上一个坐标点
原生 mousemove 触发频率高（尤其高刷屏），不做节流会导致大量冗余绘图调用，卡顿明显；同时 Canvas 的 lineTo() 是相对上一个端点画线，若没存前序坐标，会从画布左上角（0,0）开始连。
实操建议：
- 用
requestAnimationFrame节流替代setTimeout：更平滑、不丢帧 - 声明一个变量如
lastX/lastY，在mousedown时初始化，在每次成功绘制后更新为当前坐标 -
mousemove中只记录坐标，实际绘图逻辑放在 rAF 回调里，用ctx.lineTo(currentX, currentY)+ctx.stroke()
mouseup 或 mouseleave 时必须调用 ctx.closePath()或重置状态
松开鼠标或移出画布区域后，如果不显式终止路径，下次 mousedown 可能继承未闭合路径的状态，造成首笔异常粗、闪烁或颜色错乱——这是 Chrome/Firefox 常见渲染 bug。
实操建议：
- 在
mouseup和mouseleave两个事件里都写ctx.beginPath()，彻底切断路径上下文 - 不必调用
closePath()（它只闭合轮廓，对自由线无意义），重点是重置路径起点 - 可额外加
isDrawing = false状态标识，避免mousemove在非按下时误触发
移动端 touchstart/touchmove 需单独适配，不能只靠 mouse 事件
现代浏览器中，桌面端触发 mouse 事件的同时也可能触发 touch 事件（尤其带触摸屏的 Windows 笔记本），导致双倍绘图、坐标偏移甚至报错 TouchEvent is not defined。
实操建议：
- 检测
'ontouchstart' in window决定监听哪套事件，避免混用 - touch 事件中用
evt.touches[0].clientX取坐标，注意touches是类数组，别直接解构 - 给
canvas加style="touch-action: none"，防止系统默认滚动/缩放干扰绘画
beginPath() 漏了、lastX 没更新、touch 和 mouse 同时绑定，任何一个都会让线条“突然断掉”或“自己动起来”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
