初识贝塞尔曲线

贝塞尔曲线在CSS动画中和canvas、svg绘图中都是比较重要的一个东西！所以我来好好的小结一下关于它的一些东西。

什么是贝塞尔曲线

贝塞尔曲线于1962，由法国工程师皮埃尔·贝塞尔（Pierre Bézier）所广泛发表，他运用贝塞尔曲线来为汽车的主体进行设计。贝塞尔曲线最初由Paul de Casteljau于1959年运用de Casteljau演算法开发，以稳定数值的方法求出贝兹曲线。

贝塞尔曲线被广泛用于制图软件中。
以前描述曲线并没有很好的方法，直到它的出现。
如果你用过PS、AI之类的制图软件，想必一定会很好理解。

你可以登录https://bezier.method.ac/这个网站，在线学习体验使用PS中的钢笔工具，进行绘制各种形状的图案。

二次贝塞尔曲线

二次贝塞尔曲线，我们要绘制出来需要指定：

• 起点
• 终点
• 控制点

我们可以看到如图所示，在控制点和起点的中点，连接上了控制点与终点的中点，这根线的终点，就是与曲线相交的一个点。
可以认为控制点像一个磁铁一样，把线吸了过去。

多边二次贝塞尔曲线
可以看到有两个控制点，这样连续画出来了。
如果想要连贯的曲线，那么它们的控制点应该是中心对称的。

三次贝塞尔曲线

三次贝塞尔曲线可以包括一个拐点。
它拥有两个控制点，两个控制点中间的中点，分别连接控制点与起点、终点的连线的中点。这两根线的中点分别相连接，这个中点就是和曲线相交的地方（有点绕，看图就明白了！）

这一般也是绘图软件里常用的：

应用

在CSS中的应用

我们可以指定动画的运动曲线。在CSS中运用的也是三次贝塞尔曲线。

cubic-bezier(控制点x1, 控制点y1, 控制点x2, 控制点y2)

这个代表的是速度曲线，也就是y值是速度，可以看到粉红色和蓝色的圆点就是两个控制点：

而我们CSS中内置的一些默认的属性值，实际上是存了贝塞尔曲线的一些预设:

更多可以在：贝塞尔CSS在线体验 这里进行体验。

SVG

在SVG中定义一个二次贝塞尔曲线，用字母Q来表示，紧跟控制点和终点坐标：

<path d="M30 75 Q240 30, 300 120" style="stroke: black; fill: none;"/>

意思是，我们绘制一条路径，先把点Move（M）移动到(30, 75)的位置，然后开始绘制！
以(240, 30)为控制点，曲线的终点是(300, 120)。

如果我们要绘制多边二次贝塞尔曲线，直接在Q后面继续跟两组坐标：

Q 80 30, 100 100, 130 65, 200 80

比如这组数据，就是在(100, 100)画完一边后，继续以(130, 65)为控制点，画到(200, 80)为终点。

然后，我们提到之前的中心对称问题，可以直接使用T字母来表示中心对称的控制点。

Q 80 30, 100 100, T, 200 80

如果我们要绘制三次贝塞尔曲线，后面跟着的坐标组就有3个，分别就是起点的控制点、终点的控制点和端点（终点）。用字母C来开头指定。

M20 80, C 50 20, 150 60, 200 120

另外还有字母S开头，S x2 y2 x y，表示用x2 y2作为控制点，第一个控制点是前一个C命令的终点控制点的中心对称点。（如果前一个曲线不存在，当前点就是第一个控制点）

canvas

在canvas中使用quadraticCurveTo绘制二次贝塞尔曲线，参数分别为控制点和终点的x,y值。

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.quadraticCurveTo(20, 100, 200, 20)'
ctx.stroke();

bezierCurveTo绘制三次贝塞尔曲线。参数为起点控制点、终点控制点和终点的x、y值。

ctx.beginPath();
ctx.moveTo(20, 20);
ctx.bezierCurveTo(20, 100, 200, 100, 200, 20)'
ctx.stroke();

最后

本文是根据自己的一些小积累和资料查找总结出来的，如果有错误欢迎指正^_^，谢谢。