quadraticCurveTo画的是二次贝塞尔曲线，含1个控制点和2个端点（起点为当前绘图位置，终点为参数指定）；bezierCurveTo画三次贝塞尔曲线，含2个控制点和2个端点，支持更复杂弯曲如S形。
quadraticCurveTo 画的是什么曲线？
它画的是二次贝塞尔曲线，只有**1个控制点 + 2个端点**（起点是当前绘图位置，终点是你传的参数）。适合做平滑拐角、抛物线弧度这类简单弯曲。
常见错误现象：quadraticCurveTo 画出来“断开”或“方向反了”，多半是因为没先调用 moveTo 或 lineTo 设定好起点，Canvas 默认起点在 (0, 0)，容易跑偏。
使用场景：下拉菜单展开动画的缓动边框、简易弹道弧线、圆角矩形的单边拟合。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须确保调用前已有明确起点，比如
ctx.moveTo(50, 100) - 参数顺序是
quadraticCurveTo(cpX, cpY, endX, endY)，别把控制点和终点搞混 - 控制点越靠近线段中点，曲线越“扁”；越远离，拱起越高
bezierCurveTo 为什么需要三个点？
它画三次贝塞尔曲线，含**2个控制点 + 2个端点**（起点仍是当前绘图位置）。比 quadraticCurveTo 多一个控制自由度，能表达更复杂的弯曲形态，比如 S 形、带拐点的波浪。
常见错误现象：调用后曲线“塌陷成直线”或“飞出画布”，通常是两个控制点几乎共线或重合，导致曲率退化；也可能是起点没设对，让整条曲线漂移。
性能影响：两者底层都是路径指令，渲染开销几乎无差别；但 bezierCurveTo 更难直观调试——控制点不落在曲线上，凭感觉调很吃经验。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 参数顺序严格为
bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, endX, endY) - 推荐用辅助线可视化控制点：
ctx.lineTo(cp1X, cp1Y)再ctx.moveTo(cp1X, cp1Y)连到cp2X, cp2Y，最后连到终点 - 移动端高 DPI 屏幕下，小范围坐标差（如 ±2px）可能导致视觉抖动，控制点坐标尽量取整
canvas 贝塞尔曲线不闭合、接不上的原因
不是函数问题，而是路径状态管理被忽略。Canvas 的 quadraticCurveTo 和 bezierCurveTo 都只追加曲线段，不会自动连接前一段的终点——如果前一段是 arc 或另一次 bezierCurveTo，它们的终点未必与你期望的起点重合。
常见错误现象：“看起来少了一截”、“两段曲线中间有白缝”、“stroke() 后出现意外折线”。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
ctx.getTransform()配合手动记录上一段终点坐标（ctx.currentPoint非标准属性，不可靠） - 绘制连续曲线时，显式用
ctx.lineTo(x, y)补接，或统一用moveTo重置起点 - 调用
closePath()前确认当前点就是你想闭合到的位置；否则它会直线连回子路径起点，可能切过曲线内部
用贝塞尔曲线做平滑折线时最容易漏掉的一件事
控制点不能直接取相邻线段的中点或端点，得按比例偏移。比如想让折线拐角变圆滑，用前后两段的方向向量插值得到控制点位置，而不是硬写死 (x1 + x2)/2。
否则会出现：拐角处凹陷、曲率突变、缩放后变形加剧。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 对折线点序列
[p0, p1, p2]，p1 是拐点，控制点可设为：p1 ± k * normal(p1→p0, p1→p2)，k 是平滑系数（通常 0.3–0.6） - WebGL 或 SVG 中可用
path.smoothCurveTo自动计算，但 Canvas 2D 没这功能，必须自己算 - 动态数据驱动的曲线（如手势轨迹），每帧重算控制点时注意避免浮点误差累积，建议对坐标做
Math.round()
真正麻烦的从来不是调哪个函数，而是控制点到底该放在哪儿——没有银弹，只有反复画、反复量、反复调。
