绘制贝塞尔曲线
贝塞尔曲线于1959年，由法国物理学家与数学家Paul de Casteljau所发明，于1962年，由法国工程师皮埃尔·贝塞尔（Pierre Bézier）所广泛发表，并用于汽车的车身设计。贝赛尔曲线为计算机矢量图形学奠定了基础，它的主要意义在于无论是直线或曲线都能在数学上予以描述。
贝塞尔曲线分为两种：二次贝塞尔曲线和三次贝塞尔曲线。
quadraticCurveTo()方法绘制二次贝塞尔曲线
二次贝塞尔曲线是一种二次曲线，它只能向一个方向弯曲，由三个点来定义：两个锚点及一个控制点，控制点用来控制曲线的形状。
二次贝塞尔曲线由三个特征切线定义，曲线的第一部分与上下文点和控制点形成的虚线相切，曲线的顶部与midpoint 1和midpoint 2形成的虚线相切，曲线的最后部分与控制点和终点形成的虚线相切。如图 4‑10 所示：
图4-10 二次贝塞尔曲线示意图
在Canvas中，二次贝塞尔曲线的两个锚点分别是上下文点和终点，而起点是已知的。因此只需知道控制点和终点，就能唯一确定一条二次贝塞尔曲线。绘制方法为：
quadraticCurveTo(controlX, controlY, endingPointX, endingPointY)
以下实例使用quadraticCurveTo(cpx,cpy,x,y)方法来绘制一条二次曲线，其中，起点是由上下文维护，控制点为(cpx,cpy)，终点为(x,y)。
var cpx = 150, cpy = 50, x = 200, y = 250;context.lineWidth = 10;context.beginPath();context.moveTo(50,250);context.quadraticCurveTo(cpx,cpy,x,y);context.stroke();
上述代码的运行结果如图 4‑11 所示：
图4-11 quadraticCurveTo()方法绘制二次贝塞尔曲线
bezierCurveTo()方法绘制三次贝塞尔曲线
由于二次贝塞尔曲线只有一个控制点，所以它永远只能画向一个方向弯曲的弧线，画不出S形曲线。要绘制S形曲线，还需要使用三次贝塞尔曲线。
三次贝塞尔曲线是一种三次曲线，由四个点来定义：两个锚点及两个控制点，两个控制点用来控制曲线的形状。
贝塞尔曲线由5条特征切线定义。曲线的第一部分与从上下文点和第一个控制点形成的虚线相切，曲线的第二部分与midpoint 1和midpoint 3形成的虚线相切，曲线的顶部与midpoint 2和midpoint 4形成的虚线相切，曲线的第四部分与midpoint 3和midpoint 5形成的虚线相切，曲线的最后部分与第二个控制点和终点形成的虚线相切。如图 4‑12 所示：
图4-12 三次贝塞尔曲线示意图
Canvas中的三次贝塞尔曲线由上下文点、两个控制点、一个终点定义。绘制方法为：
bezierCurveTo(controlX1, controlY1, controlX2, controlY2, endPointX, endPointY)
以下实例使用bezierCurveTo(cp1x,cp1y, cp2x,cp2y,x,y)方法来绘制一条二次曲线，其中，起点是由上下文维护，控制点为(cp1x,cp1y)和(cp2x,cp2y)，终点为(x,y)。
var cp1x = 200, cp1y = 260, cp2x = 380, cp2y = 10, x = 420, y = 180;context.lineWidth = 10;context.beginPath();context.moveTo(180, 100);context.bezierCurveTo(cp1x,cp1y, cp2x,cp2y,x,y);context.stroke();
上述代码的运行结果如图 4‑13 所示：
图4-13 bezierCurveTo()方法绘制三次贝塞尔曲线
关于作者
歪脖先生，十五年以上软件开发经验，酷爱Web开发，精通 HTML、CSS、JavaScript、jQuery、JSON、Python、Less、Bootstrap等，著有《HTML宝典》、《揭秘CSS》、《Less简明教程》、《JSON教程》、《Bootstrap2用户指南》，并全部在 GitHub 上开源。
版权声明：本文出自歪脖网的《HTML宝典》，欢迎在线阅读，并提出宝贵意见。
