直接用lineTo连接鼠标点会生成锯齿状折线，真正平滑需用贝塞尔曲线通过控制点模拟运笔惯性；内部点用近似公式生成左右控制点，首尾用延长线法补足，点少时可改用quadraticCurveTo中点插值，并配合分段缓存、round线帽及速度感知线宽提升真实感。
直接用 lineTo 连接鼠标轨迹点，出来的线条是生硬的锯齿状。真正平滑的关键，不是画得密，而是用贝塞尔曲线“引导”走向——靠控制点模拟运笔惯性，让起笔、转弯、收笔都有自然弧度。
怎么把一堆鼠标点变成平滑贝塞尔路径
原始采集点（比如每 16ms 记一个）太杂乱，不能直接当锚点用。要先生成两组控制点，再用 bezierCurveTo 分段绘制：
- 对内部点 Pi（非首尾），常用近似法：左控制点 C₁ᵢ = Pᵢ + (Pᵢ₊₁ − Pᵢ₋₁)/3，右控制点 C₂ᵢ = Pᵢ₊₁ − (Pᵢ₊₂ − Pᵢ)/3；
- 首尾段用延长线法补足，确保起点精确落在第一个点、终点落在最后一个点；
- 如果点太少（比如只有 3–4 个），可改用
quadraticCurveTo配合中点插值，更轻量。
Canvas 绘制时的实操要点
别在每次 mousemove 都重绘整条线，那样卡且难控制。推荐分段缓存 + 增量绘制：
Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）
下载
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
- 只在点间距超过阈值（如 10–20px）时才新增一段贝塞尔；太密的点合并处理，避免冗余计算；
- 调用顺序固定：
beginPath()→moveTo(首个锚点)→ 循环bezierCurveTo(c1, c2, 下一锚点)； - 务必设置
ctx.lineCap = 'round'和ctx.lineJoin = 'round'，否则线段衔接处会露尖角。
让手绘感更真实的小技巧
纯数学拟合容易显得“太准”，加点人为特性才像真笔迹：
- 根据鼠标移动速度动态调整线宽：快的地方细，慢的地方粗，用
velocityFilterWeight平滑速度估算； - 在起点和终点附近轻微偏移控制点，模拟起笔轻、收笔顿的物理习惯；
- 开启节流（throttle）或最小距离过滤，防止高频采样导致控制点抖动。
不复杂但容易忽略。核心就一条：鼠标点只是数据源，贝塞尔才是表达语言。
