quadraticCurveTo曲线断开或错位是因为未先用moveTo设置起点，它必须接在已有路径后；控制点决定曲率，终点为下一段起点；需调用stroke()或fill()才可见，且注意canvas实际宽高与样式宽高的区别。
quadraticCurveTo 画出来的线总是断开或错位？
这是因为 quadraticCurveTo 不是独立绘图命令，它必须在已有路径起点之后调用——它只定义「从当前点出发、以指定控制点、到达指定终点」的一段曲线。如果没先用 moveTo 设起点，就会接着上一条路径的终点继续画，结果看起来像跳变或偏移。
常见错误现象：quadraticCurveTo 没反应、曲线起点飘在别处、和预期位置完全对不上。
- 必须先调用
moveTo(x, y)明确设置起始点 - 控制点（controlX, controlY）不在线段上，而是“拉拽”曲线形状的磁力点：越靠近起点/终点，曲线越平直；越偏离，拱起越明显
- 终点（endX, endY）才是曲线真正落笔的位置，也是下一段路径的默认起点
控制点怎么选才让曲线自然弯曲？
没有固定公式，但有可复用的构造逻辑：把控制点放在起点与终点连线的垂直方向上，偏移量决定曲率大小。比如想画一个向上拱的弧线，控制点 Y 坐标应小于起点和终点的 Y 值。
实际场景中，常基于已知三点反推控制点——例如 UI 中两个锚点 + 一个中间“高度”值：
立即学习“前端免费学习笔记（深入）”；
ctx.moveTo(100, 200); // 控制点设在中点正上方 80px 处 ctx.quadraticCurveTo(150, 120, 200, 200);
注意：quadraticCurveTo 的控制点只有一个，别和 bezierCurveTo（需要两个控制点）混淆。
为什么 stroke() 后看不见曲线？
最常被忽略的是路径未闭合或未描边——quadraticCurveTo 只添加子路径，不自动 stroke 或 fill。
- 确认是否漏了
ctx.stroke()（描边）或ctx.fill()（填充） - 检查
lineWidth是否为 0 或颜色是否与背景相同（如strokeStyle = '#fff'在白底 canvas 上不可见） - 确认 canvas 元素本身有明确宽高（CSS 设置宽高会拉伸像素，要用
canvas.width/canvas.height属性设实际分辨率）
和 bezierCurveTo 混用时要注意什么？
两者共用同一条路径上下文，但行为不同：quadraticCurveTo 只需一个控制点，bezierCurveTo 需要两个。混用时，当前点始终是上一段路径的终点，控制点坐标系完全一致。
容易踩的坑：
- 从
quadraticCurveTo切换到bezierCurveTo时，别误把前者的控制点当后者的第一个控制点用 - 连续多次调用
quadraticCurveTo时，每次的「起点」都是上一次的「终点」，不是最初moveTo的位置 - 若需重置起点，必须再次调用
moveTo
复杂曲线往往需要反复调试控制点位置，建议先用固定数值画出骨架，再微调控制点坐标——贝塞尔曲线的“手感”比公式更重要。
