canvas API 不提供开箱即用的绘图交互，需手动管理鼠标状态、路径绘制与撤销逻辑；关键在连点成线、正确使用 beginPath()/moveTo()/lineTo()，撤销需保存操作指令或双canvas缓存，导出图片须注意跨域、像素尺寸与格式参数。
Canvas API 本身不提供“绘图功能”这种开箱即用的交互逻辑，它只是一块空白画布，所有线条、颜色、鼠标响应都得你手动实现——直接调用 beginPath()、lineTo()、stroke() 不会自动记住你拖拽了什么，也不会自动处理笔触粗细变化或撤销操作。
如何监听鼠标移动并画出连续线条
关键不是“画”，而是“连点成线”。Canvas 默认不跟踪鼠标状态，必须自己管理 isDrawing 标志位和上一个坐标：
- 监听
mousedown设置isDrawing = true，并记录初始startX/startY - 在
mousemove中，仅当isDrawing为true时才调用lineTo(x, y)，否则忽略 - 每次画线前必须调用
beginPath()，否则新线会和旧路径合并，影响样式或造成意外连接 -
moveTo(prevX, prevY)必须放在lineTo(x, y)前，否则线从画布原点（0,0）开始连
漏掉 beginPath() 或错放 moveTo() 是初学者最常导致“线条跳变”或“多条线粘连”的原因。
为什么 clearRect() 后画的内容消失了，但 undo 不好做
clearRect() 是彻底擦除像素，不可逆。Canvas 没有图层、历史栈或矢量对象概念，它只存最终像素结果。
立即学习“Java免费学习笔记（深入）”；
- 想支持撤销，必须自己保存每次绘制的“操作指令”（如 { type: ‘line’, from: [x1,y1], to: [x2,y2], color: ‘#000’ }），而不是截图或 canvas.toDataURL()
- 或者用双 canvas：一个用于显示（displayCanvas），一个用于离屏绘制+缓存（bufferCanvas），每次 undo 就重绘 buffer 到 display
- 直接对 canvas 像素操作（
getImageData()/putImageData()）性能差，且无法按“笔画”粒度撤销
很多人试图用 toDataURL() 存快照做 undo，结果内存暴涨、操作卡顿——因为 base64 字符串体积大，且频繁生成/解析极耗 CPU。
drawImage() 能不能把用户画的内容导出为图片
可以，但要注意跨域限制和缩放失真：
- 导出前确保 canvas 没有来自其他域名的图片（否则
toDataURL()抛SecurityError） - 若 canvas 宽高是 css 缩放的（比如
width: 600px; height: 400px;但实际canvas.width=300），导出图会模糊——必须设canvas.width和canvas.height为真实像素尺寸 - 导出 PNG 推荐用
canvas.toDataURL('image/png')；JPEG 需传'image/jpeg'并加质量参数，如canvas.toDataURL('image/jpeg', 0.9)
导出按钮点击后没反应？先检查控制台有没有 SecurityError，再确认 canvas 的 width/height 属性是否被 CSS 覆盖而变小。
Canvas 绘图真正的复杂点不在 API 调用，而在状态管理：鼠标按下/抬起的时机、路径是否闭合、是否需要抗锯齿、不同设备像素比（window.devicePixelRatio）下如何保持清晰——这些都不写进教程，但每一条都会让“画一笔”变成 bug 现场。