canvas自由曲线拟合核心是三点动态分组生成贝塞尔曲线：二次贝塞尔用于实时手写（prev→curr→next，quadraticcurveto），三次贝塞尔实现c¹连续（beziercurveto+启发式控点），配合弧长查表、局部重绘与高dpi优化提升性能与真实感。
Canvas 实现自由曲线平滑拟合，核心不是连点成线，而是把用户划出的离散采样点，转化为有方向、有张力的贝塞尔曲线段——重点在三点动态分组、控制点合理生成、局部重绘控制，而不是堆点或插值补密。
用二次贝塞尔三点一组拟合（最简实用）
适合手写签名、白板涂鸦等实时场景，性能好、逻辑清晰：
- 至少缓存最近 3 个坐标：prev → curr → next
- 首次 moveTo(prev.x, prev.y)，之后每新增一个 next 点，就调用 quadraticCurveTo(curr.x, curr.y, next.x, next.y)
- 控制点 curr 可微调：例如向量偏移 (next − prev) 的 10%～15%，避免拐角过钝或发散
- 务必设置 ctx.lineCap = 'round' 和 ctx.lineJoin = 'round'，让线头线尾自然融合
用三次贝塞尔实现高阶连续（如图表/动画路径）
当需要 C¹ 连续（切线方向一致）、回锋或精确曲率控制时，三次贝塞尔更可靠：
- 对锚点序列 P₀, P₁, P₂…，为每段 Pᵢ→Pᵢ₊₁ 计算左控点 C₁ᵢ 和右控点 C₂ᵢ
- 常用启发式：C₁ᵢ = Pᵢ + (Pᵢ₊₁ − Pᵢ₋₁)/3，C₂ᵢ = Pᵢ₊₁ − (Pᵢ₊₂ − Pᵢ)/3（适用于内部点）
- 首尾段用延长线法补控点，确保起点/终点严格落在原始坐标上
- 绘制时：moveTo(P₀)，再循环调用 bezierCurveTo(C₁ᵢ.x, C₁ᵢ.y, C₂ᵢ.x, C₂ᵢ.y, Pᵢ₊₁.x, Pᵢ₊₁.y)
解决“忽快忽慢”与卡顿问题
贝塞尔参数 t 是几何非匀速的，直接线性插值会导致小球在弯处明显减速：
- 预计算整条路径：用 De Casteljau 算法采样 ≥120 个点，累加相邻距离得弧长数组
- 构建 s→t 查找表（s 是归一化进度，0 到 1），查表用二分查找即可
- 动画中 t_time 线性递增，但位置由 getBezierPoint(lookup(t_time)) 决定
- 弧长表和控制点只初始化一次，别放在 requestAnimationFrame 里重复计算
动态书写时的性能优化技巧
持续追加点时，全量重绘会闪烁、卡顿，应聚焦末端更新：
- 用双端队列（如 Array 或自定义 deque）管理坐标，超出长度自动 shift() 旧点
- 每次新增点后，仅重绘最后 2–3 段曲线（从倒数第 3 个点开始）
- 用 clearRect() 擦除旧线末端矩形区域，而非全屏清空
- 结合高 DPI 适配（devicePixelRatio）和速度感知线宽（根据点间距动态调整 lineWidth）提升真实感
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
