bezierCurveTo用于绘制三次贝塞尔曲线，需两个控制点和一个终点（起点为当前路径终点）；控制点不被经过但牵引曲线弯曲方向与程度，影响起始段和结束段的陡峭度及形态。
Canvas 中的 bezierCurveTo 方法用于绘制三次贝塞尔曲线，它需要三个点：两个控制点和一个终点（起点是当前路径的终点）。理解这三点的作用，是画出预期曲线的关键。
三次贝塞尔曲线的三个关键点
调用格式：ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)
- cp1x/cp1y：第一个控制点坐标，影响曲线起始段的弯曲方向和程度
- cp2x/cp2y：第二个控制点坐标，影响曲线结束段的弯曲方向和程度
- x/y：曲线终点，即路径最终到达的位置
- 起点默认为当前路径的最后一个点（可用
moveTo()显式设置）
如何直观理解控制点的作用
可以把两个控制点看作“牵引手”：
- 曲线不会经过控制点，但会被它们“拉向”各自方向
- 控制点离起点越近，起始段越陡；离终点越近，结束段越陡
- 若两个控制点与起点、终点共线且等距，曲线趋近于直线
- 尝试把两个控制点分别放在起点右上方和终点左上方，会得到一个拱形上凸曲线
实用绘制步骤（带起始点）
完整示例（从 (50,150) 开始，画一条平滑弧线到 (350,150)）：
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(50, 150); // 起点
ctx.bezierCurveTo(100, 50, 300, 50, 350, 150); // 两个控制点向上，终点在右侧
ctx.stroke();
注意：必须先调用 beginPath() 和 moveTo()，否则可能接续上一段路径，导致意外连接。
常见问题与建议
- 曲线“断开”或位置错乱？检查是否漏掉
beginPath()或误用了lineTo()干扰路径状态 - 想画闭合贝塞尔形状？用
closePath()，但注意它连接的是首尾点，不是控制点 - 需要精确控制形状？可借助工具（如 SVG 编辑器）生成控制点坐标，再迁移到 Canvas
- 动态动画中频繁重绘？避免每次重复
beginPath()+ 全路径重绘，考虑保存路径或使用clearRect()配合增量更新
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
