[Canvas 学习笔记]绘图 - 贝塞尔曲线

[musicode]

相关 API：

• quadraticCurveTo(cx, cy, x, y)
• bezierCurveTo(cx1, cy1, cx2, cy2, x, y)

贝塞尔曲线分两种：

1. 平方贝塞尔曲线。它是一种二次曲线，由三个点来定义：两个锚点和一个控制点。
2. 立方贝塞尔曲线。它是一种三次曲线，由四个点来定义：两个锚点和两个控制点。

   平方贝塞尔曲线（quadraticCurveTo）

平方贝塞尔曲线是只向一个方向弯曲的简单曲线。

点 (cx, cy) 表示控制点，用于决定曲线的形状，点 (x, y) 表示锚点。

跟 arcTo 一样，quadraticCurveTo 还需要第三个点：当前路径的最后一个点。

立方贝塞尔曲线（bezierCurveTo）

立方贝塞尔曲线可以向两个方向弯曲。

点 (cx1, cy1) 表示控制点 1，点 (cx2, cy2) 表示控制点 2，点 (x, y) 表示锚点。

同样的，bezierCurveTo 还需要第三个点：当前路径的最后一个点。

过控制点的曲线

上面两个贝塞尔曲线函数，曲线并不会穿过控制点，更像是被它吸引过去的。如果我们明确的想让曲线穿过某个点，比如常见的随着鼠标移动，更新曲线形态的交互，就会用到 (mouseX, mouseY)，公式如下：

cx = tx * 2 - (x0 + x2) / 2
cy = ty * 2 - (y0 + y2) / 2

其中 (x0, y0) 是起点，(x1, y1) 是终点，(cx, cy) 是控制点，(tx, ty) 是目标点。