三次贝塞尔曲线由起点、两个控制点（cp1x,cp1y）和（cp2x,cp2y）、终点（x,y）定义，起点非参数而是上一路径终点或moveto()设定；控制点不在线上但决定切线方向与曲率，距离越远曲线越伸展，需先beginpath()和moveto()确保起点正确，参数为绝对坐标而非相对偏移。
bezierCurveTo 三个控制点怎么填才画出想要的曲线
三次贝塞尔曲线由起点（隐式取当前路径终点）、两个控制点和一个终点决定。bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) 的参数顺序容易记反：前两对是控制点坐标，最后一对才是终点。起点不是参数，而是上一条路径的终点（或 moveTo() 指定的位置）。
常见错误是误以为第一个控制点“拉向”起点、第二个“拉向”终点——实际是两个控制点共同定义切线方向与曲率权重。控制点离路径越远，曲线越“伸展”；两点靠近终点连线时，曲线更平缓。
- 确保先调用
beginPath()和moveTo(x0, y0)设定起点，否则曲线从 (0,0) 开始，可能看不见 - 控制点坐标是绝对位置，不是相对偏移——别写成
bezierCurveTo(10, 10, 20, 20, 100, 50)就以为“只动了10像素”，它真就在画布坐标 (10,10) 处锚定控制点 - 调试时可用
strokeRect()分别标出两个控制点位置，直观观察它们如何“牵引”曲线
为什么曲线看起来断开或不连续
多次调用 bezierCurveTo() 时，若未保持路径连续，新曲线会从 (0,0) 或上次路径终点外的某处开始，造成视觉断裂。关键在于：每次新曲线的起点必须显式设为上一段的终点（或期望连接点）。
例如，想画两条首尾相接的贝塞尔曲线，不能直接连写两个 bezierCurveTo() ——第二段的起点是第一段的终点，但 canvas 不自动记住这个位置用于下一次绘制，除非你主动用 lineTo() 或再次 moveTo() 对齐。
- 连续曲线推荐用
lineTo()+bezierCurveTo()组合：先lineTo(endX, endY)移动到连接点，再调用bezierCurveTo() - 若需平滑连接（C1 连续），第二段的第一个控制点应落在“第一段终点与第二段终点”的延长线上，且距离比例影响曲率过渡——这不是 canvas 限制，而是贝塞尔数学特性
- 忘记
stroke()或fill()会导致路径生成了但完全不可见，别怀疑bezierCurveTo()失效
bezierCurveTo 在不同浏览器中表现一致吗
是的，bezierCurveTo() 行为在所有支持 Canvas 2D Context 的现代浏览器（Chrome/Firefox/Safari/Edge）中完全一致，W3C 标准明确定义了三次贝塞尔插值算法。真正影响视觉一致性的通常是坐标系理解偏差或抗锯齿设置。
注意：canvas 默认启用抗锯齿，曲线边缘柔和；若关闭（ctx.imageSmoothingEnabled = false），只影响图像缩放，对矢量路径无作用。真正要小心的是设备像素比（dpr）——高 DPR 屏幕下，用 CSS 设置 width/height 但不调整 canvas.width/canvas.height，会导致路径被拉伸模糊，看起来“曲线变胖”或失真。
- 高 DPR 下务必同步设置：
canvas.width = canvas.clientWidth * window.devicePixelRatio，同理 height -
bezierCurveTo()本身不接受浮点精度以外的参数，传入NaN或Infinity会静默失败（路径中断），建议对输入做isFinite()校验 - 性能上，单次调用无压力；但每帧动态生成上百条贝塞尔路径时，建议复用
Path2D对象（new Path2D()）缓存路径，避免重复解析
用 bezierCurveTo 画圆弧靠谱吗
不靠谱。三次贝塞尔曲线无法精确表示圆弧，只能近似。四个象限各用一条三次贝塞尔可拼出较优近似圆（误差 cp1 = [0, c], cp2 = [c, 0], end = [r, 0]，其中 c = r * 0.551915024494（即 4*(√2−1)/3）。硬编码这个系数比手调控制点稳定得多。
如果目标就是画圆/圆弧，优先用 arc() 或 arcTo()——它们原生支持真实圆弧，精度高、语义清、性能好。只有在需要与其它贝塞尔段统一建模（如 SVG 路径转 canvas 渲染）时，才考虑近似方案。
- 别用
bezierCurveTo()手动拟合任意角度圆弧——没有通用闭式解，必须分段且误差不可控 - Canvas 2D API 没有内置“贝塞尔转圆弧”反解函数，相关计算需自行实现或引入数值方法库
- 移动端低性能设备上，过度使用高精度贝塞尔近似反而比
arc()更慢，因后者常被硬件加速
复杂点在于控制点的几何直觉和路径状态管理——它不像 lineTo() 那样所见即所得。最容易被忽略的是：你画的从来不是“一条独立曲线”，而是当前路径的一部分；而路径的起点、是否闭合、是否已 stroke，全靠你手动维护。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
