初识贝塞尔曲线

贝塞尔曲线在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();

最后

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