基于Canvas的贝塞尔曲线详解

---

前言

贝塞尔曲线一直是计算机绘图中的重点，我们常见的PhotoShop和Svg图片等和网页上的图片啊之类的就大量使用了贝塞尔曲线。该文使用html5中的Canvas标签，由特点、原理、实例等各个方面深入研究了贝塞尔曲线的应用与意义。

---

一、基本简介

贝塞尔曲线是应用于二维图形应用程序的数学曲线。曲线的定义有四个点：起始点、终止点（也称锚点）以及两个相互分离的中间点。滑动两个中间点，贝塞尔曲线的形状会发生变化。二十世纪六十年代晚期，PierreBézier应用数学方法为雷诺公司的汽车制造业描绘出了贝塞尔曲线。

二、一些特点

1. 有起始点；
2. 由连续的控制点{P0,P1,…Pn-1}控制曲线的形状；
3. 描绘的线段一般不经过控制点。

三、一个例子

二次贝塞尔曲线

起始点坐标P1(50,50),P2(50,200)
控制点坐标P3(200,200)
该曲线整体划分为200（随机个数）个点，当前图片取得是第80个点
在线段P1P2和P2P3上取得D和F点，使得：$\frac{P_{1}D}{P_1{P}_2}=\frac{P_{2}F}{P_2{P}_3},$ 在链接DF,并在线段DF上找到H点，使得：$\frac{DH}{DF}=\frac{P_{1}D}{P_1{P}_2}=\frac{P_{2}F}{P_2{P}_3}。$
=>D(50,110)，F(110,200)，H(74,146)
H点即是第80个点的坐标，根据上述关系，找到所有200个点，就得到下图。

=>得到了一条曲线
=>贝塞尔曲线其实就是一系列点的集合(只要点够多，就越趋近线段)
下面展示一下一个一次，三次，四次，五次贝塞尔曲线的例子：

贝塞尔曲线	示例
一
三
四
五

相应推导过程与上面二次贝塞尔的一样，只是需要更多步骤。

四、公式推导

给定一一个系数 $t\in [0,1]$。

1、一次贝塞尔曲线

设P1坐标为(a,b),P2坐标为(c,d)
在线段P1P2上取得一点H(e,f)，使得：$t=\frac{P_{1}H}{P_1{P}_2}=\frac{(e-a,f-b)}{(c-a,d-b)}$。
=>$\{\begin{array}{l}e=t(c-a)+a=tc+(1-t)a\\ f=t(d-b)+b=td+(1-t)b\end{array}$
=>$B(t)=(P_2-P_1)\ast t+P_1=(1-t)P_1+t{P}_2$。
所以一次贝塞尔曲线中各点$B(t)$为：$(P_2-P_1)\ast t+P_1=(1-t)P_1+t{P}_2$。

2、二次贝塞尔曲线

由例子部分内容及一次贝塞尔曲线公式：
=>$\{\begin{array}{l}D=(1-t)P_1+t{P}_2\\ F=(1-t)P_2+t{P}_3\\ H=(1-t)D+tF\end{array}$
=>$B(t)=H=(1-t{)}^2{p}_1+2t(1-t)P_2+t^2{P}_3$。

同理可得三次，四次，五次贝塞尔曲线公式：

3、三次贝塞尔曲线

$B(t)=(1-t{)}^3{P}_1+3t(1-t{)}^2{P}_2+3t^2(1-t)P_3+t^3{P}_4$。

4、四次贝塞尔曲线

$B(t)=(1-t{)}^4{P}_1+4t(1-t{)}^3{P}_2+6t^2(1-t{)}^2{P}_3+4t^3(1-t)P_4+t^4{P}_5$。

5、五次贝塞尔曲线

$B(t)=(1-t{)}^5{P}_1+5t(1-t{)}^4{P}_2+10t^2(1-t{)}^3{P}_3+10t^3(1-t{)}^2{P}_4+5t^4(1-t)P_5+t^5{P}_6$。
由上述几个公式，研究规律，可以发现：

常数项 $C=\frac{n!}{i!(n-i)!},t\in [0,n]$（杨辉三角）;

指数项 $E_t=i,i\in [0,n]$；

指数项 $E_{1-t}=n-i,i\in [0,1]$。

由上述规律，我们得到n阶贝塞尔曲线公式：

一般公式

$$B(t)=\sum _{i=0}^n\frac{n!}{i!(n-i)!}{t}^i(1-t{)}^{n-i}{P}_i=(1-t{)}^n{P}_0+\frac{n!}{(n-i)!}t(1-t{)}^{n-1}{P}_1+...+t{P}_n$$
由上述推导过程，可知不管几阶公式都是由一阶公式推导出来的：所以我们可以得到一个递推公式： $$P_i^k\{\begin{array}{l}{P}_i,k=0\\ (1-t)P_i^{k-1}+t{P}_{i+1}^{k-1},k\in [1,n-k]\end{array}$$

五、一些实例

由公式推导的递推公式可知，不管多复杂的贝塞尔曲线，我们都可以拆分成一阶贝塞尔曲线。由此关系，我们在canvas中的曲线逻辑就有一个眉目了，下面是两个用贝塞尔曲线绘制的示意图片（canvas以为我们内置了两个函数quadraticCurveTo和bezierCurveTo，分别代表二次贝塞尔曲线和三次贝塞尔曲线）。

类别	示例
头像
小孩

由此可见，贝塞尔曲线的功能是很强大的，而他的应用也特别广泛，例如PhotoShop软件，SVG图片等等，我们都能看见他们的身影。
上述所有图片项目地址：贝塞尔曲线Demo

---

一些建议

1. 平常绘图等尽量使用2-3阶贝塞尔曲线；
2. 超过3阶的曲线尽量降阶为2-3阶贝塞尔曲线；
3. 贝塞尔曲线本质上是一系列点的集合，需要大量的计算。

总结

贝塞尔曲线功能强大，应用广泛。我们不仅可以使用它绘制图片，还能应用与各个领域，例如激光切割啊等等。就像实例中展示的那样，使用贝塞尔曲线，我们可以绘制各种各样的图形，为计算机的图形图像技术产生了深远意义上的影响。基于此，贝塞尔曲线具有很高的研究意义，为我们的社会进步和发展注入了一针强心剂。