贝塞尔曲线就是可以通过控制点来完成对线条的扭曲，在平面中，已知两个点的最短距离为直线，在这两个点的基础上引入一个控制点来控制直线的弯曲。

本文远行环境为HTML5中的Canvas，使用的方法来自CanvasRenderingContext2D。

通过两个点可以绘制一条直线

但是如果要绘制一条曲线的话，就要使用它提供的绘制贝塞尔曲线接口bezierCurveTo（三次贝塞尔曲线）或quadraticCurveTo（二次贝塞尔曲线）。

关于贝塞尔曲线

在数学的数值分析领域中，贝济埃曲线（英语：Bézier curve，亦作“贝塞尔”）是计算机图形学中相当重要的参数曲线。更高维度的广泛化贝济埃曲线就称作贝济埃曲面，其中贝济埃三角是一种特殊的实例。

二次贝塞尔曲线

引入一个控制点生成的曲线叫二次贝塞尔曲线，在上面的例子中有两个点P0(0,0) P1(200,200)，接下来我们引入点P2(0, 200)作为控制点， 相应的改变方法为quadraticCurveTo 。

可以看到直线发生了弯曲。

三次贝塞尔曲线

接下来再引入一个点P3(150,150)，将方法改为bezierCurveTo

可以看到曲线再次发生了变化。

平滑曲线

很多场景下，需要在给定若干个点中绘制一条线，使这条线穿过给出的点，但是如果直接穿过的话线条会很生硬，那么需要一种处理方式，结合上面的贝塞尔曲线知识，可以让直线变成曲线。但是这样会存在一个问题，就是如何去确定贝塞尔曲线的控制点，才能够让曲线变得平滑。这是百度文库的一篇文章贝塞尔曲线控制点确定的方法_百度文库，里面介绍了如何得到控制点，使得曲线平滑。

这是两个控制点的计算公式，A和B分别对应两个点。但是需要注意的是起始点和结束点的控制点无法通过上面的公式推导。这两个点的坐标需要通过下面的公式进行计算。

其中B 0点和A n-1点依然根据上面的公式求得。 根据公式实现了如下算法

可以得到一条平滑的曲线，当然这类算法还有很多，可以Google相关文章。

参考

基于canvas使用贝塞尔曲线平滑拟合折线段 · Issue #31 · Aaaaaaaty/blog · GitHub 贝塞尔曲线控制点确定的方法_百度文库