HTML5 Canvas中的贝塞尔曲线

　　在HTML5提供的画布功能，也就是Canvas中，getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。本文以getContext("2d")中提供的方法为例，简要研究了其中用于绘制曲线路径的贝塞尔曲线。

　　JavaScript中的getContext("2d")为我们提供了两种绘制贝塞尔曲线路径的方法，分别是quadraticCurveTo()用于绘制二次贝塞尔曲线和bezierCurveTo()用于绘制三次贝塞尔曲线。

 

什么是贝塞尔曲线？

贝塞尔曲线(Bézier curve)，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线，是计算机图形学中相当重要的参数曲线。

         贝塞尔曲线由线段与节点组成，控制其中的节点，便能控制曲线的路径。具体的参数方程如下：

（1）线性公式

         给定点P₀、P₁（可理解为曲线的起点和终点），线性贝兹曲线只是一条两点之间的直线段。公式如下：

其长度等于两点间线段的长度。

（2）二次方公式

　　　二次方贝塞尔曲线的路径由给定点P₀、P₁、P₂（可分别理解为起点、控制点和终点）的函数B（t）追踪：

（3）三次方公式

　　P₀、P₁、P₂、P₃四个点在平面或在三维空间中定义了三次方贝兹曲线。曲线起始于P₀走向P₁，并从P₂的方向来到P₃。一般不会经过P₁或P₂；这两个点只是在那里提供方向资讯。P₀和P₁之间的间距，决定了曲线在转而趋进P₃之前，走向P₂方向的“长度有多长”。

曲线的参数形式为：

 

2.怎样在Canvas中绘制贝塞尔曲线

 

绘制二次贝塞尔曲线

　　Canvas中，我们可以采用getContext("2d")提供的quadraticCurveTo()方法来绘制二次贝塞尔曲线。

　　从上一节我们可以知道，要绘制一条二次贝塞尔曲线，需要知道三个控制点的坐标，即P₀起点、P₁控制点和P₂终点的坐标。在Canvas中，我们是通过moveTo()方法来确定起点的，即moveTo（x₀，y₀），其中x₀是起点横坐标，Y₀是起点的纵坐标。而控制点和终点坐标则是在quadraticCurveTo()方法中确定，具体的是quadraticCurveTo(cpx,cpy,x,y),其中cpx和cpy是控制点的横纵坐标，而x和y则是终点的横纵坐标。

　　因此，连续使用moveTo()和quadraticCurveTo()方法我们就能得到一条二次贝塞尔曲线。

 

绘制三次贝塞尔曲线

　　Canvas中，我们可以采用getContext("2d")提供的bezierCurveTo()方法来绘制三次贝塞尔曲线。

　　三次贝塞尔曲线需要四个点的坐标来确定，即起点、控制点1、控制点2和终点坐标。和二次贝塞尔曲线类似，三次贝塞尔曲线也是moveTo()和bezierCurveTo()连续使用得到的。moveTo(x₀，y₀)依旧负责起点坐标，而bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y)则依次负责控制点1、控制点2和终点坐标。

 

　　综上所述，在Canvas中，我们只要利用好moveTo()、quadraticCurveTo()和bezierCurveTo()三种方法，就能很容易地得到想要的贝塞尔曲线。如果已知曲线上的点，也可以通过本文中提供的公式进行计算（代入消除参数t）得出控制点坐标，再利用上述方法进行绘制。

 

来源：https://www.cnblogs.com/forrestRun/p/4644463.html