Canvas绘制贝塞尔曲线关键在控点布局与路径管理：二阶用quadraticCurveTo实现圆角/弹道，三阶用bezierCurveTo调控S形轨迹；必调beginPath()防路径污染，结合动画与质感技巧可实现拖尾、手绘等炫酷效果。
网页端用 Canvas 绘制贝塞尔曲线实现炫酷图形，关键不在堆公式，而在“控点怎么摆”和“路径怎么管”。只要掌握二阶、三阶两种画法，配合动画节奏和视觉细节，就能做出拖尾小球、手绘圆、波浪进度条这类效果。
二阶贝塞尔：一个控制点，搞定圆角与弹道
适合微笑弧、气泡尾巴、简单抛物线路径。语法是 quadraticCurveTo(cpX, cpY, endX, endY)，但必须先用 moveTo() 明确起点，否则默认从 (0, 0) 开始，容易错位。
- 控制点不在线上，只起“牵引”作用：离起点终点连线越远，弧度越大；放在垂直中线上，就得到标准拱形
- 示例：画一条上凸微笑线
ctx.beginPath();
ctx.moveTo(50, 100);
ctx.quadraticCurveTo(200, 20, 350, 100);
ctx.stroke(); - 常见坑：误以为控制点是中间经过的点——其实曲线完全不经过它
三阶贝塞尔：两个控制点，精准调控起止形态
适合 S 形路径、手写连笔、UI 动效轨迹。语法是 bezierCurveTo(cp1X, cp1Y, cp2X, cp2Y, endX, endY)。
- cp1 主要影响起点附近弯曲方向和陡峭程度（比如让小球“甩出去”）
- cp2 主要影响终点附近收尾趋势（比如让轨迹“缓落”或“回钩”）
- 两个控制点对称分布在起点→终点连线两侧，曲线更均衡；都偏上方，就托起整条饱满拱线
- 示例：左下到右上的柔和上升弧
ctx.beginPath();
ctx.moveTo(50, 150);
ctx.bezierCurveTo(100, 50, 300, 50, 350, 150);
ctx.stroke();
路径管理比画法更重要
很多“曲线没出来”“连错位置”“颜色串了”，问题不在控制点坐标，而在 Canvas 的路径状态。
- 每次画新曲线前，务必调用 beginPath()，否则会接续上一段路径，造成意外连接
- 避免混用 lineTo() 和贝塞尔方法在同一路径中，除非你明确需要折线+曲线混合
- 想闭合形状？用 closePath()，它只连接首尾点，与控制点无关
- 动画中频繁重绘时，别每次都 beginPath() + 全路径重绘，可考虑 clearRect() 清屏后增量更新
加点炫酷：拖尾、手绘感、动态运动
静态曲线只是基础，真正炫酷来自动效和质感：
- 小球沿曲线运动：用德卡斯特里奥算法或参数方程，按 t ∈ [0,1] 计算曲线上每个时刻的坐标，再用 requestAnimationFrame 逐帧绘制小球
- 丝滑拖尾：不是画一条线，而是保存最近 N 个 t 值对应的位置，用 lineTo() 连成渐隐线段，或用透明度递减的多个小圆点
- 手绘风格：把整条曲线拆成若干小段，每段用 bezierCurveTo 绘制，并给每个控制点加轻微随机偏移，模拟真实抖动
- 渐变描边：用 createLinearGradient 创建渐变色，赋给 strokeStyle，让线条自带流动感
