Canvas做游戏实践分享(四)
3.4 使用quadraticCurveTo绘制二次贝赛尔曲线

?????? Canvas提供了一系列的方法来绘制曲线，比如quadraticCurveTo(通过起始两个点以及一个控制点来绘制，前两个参数为控制点横纵坐标，后两个参数为终点横纵坐标，使用的是数学上的二次贝赛尔方程)。下面我们来看一下常见的一些使用。

?

固定控制点
?????? 如下程序，我们实现了一个固定起始点，使用鼠标位置做为控制点，来绘制二次贝赛尔曲线的应用：

?如下，即为其效果图：
曲线过定点
?
????? 之前我们绘制的曲线是控制点确定的曲线，如果我们已知曲线上的一个点（非起始点），则需要通过贝赛尔方程的一些特性来处理。(n次贝赛尔曲线有n+1个控制点，并且贝赛尔曲线位于这些控制点组成的多边形内部。)? 
?????? 已知两个端点(x0,y0)与(x2,y2)及曲线上的一个点(x1,y1).则可以得到其控制点的位置为
?这是因为使用二次贝赛尔方程来绘制一个多点控制的平滑曲线，不可以每三个已知点为一组依次来绘制曲线，这样绘制出来的每一个二次曲线并不在一个相对坐标系统内。可以从第二个点开始，使用每两个点的中点来做端点，其它点均做为控制点来绘制曲线，如下图：(空心点为已知的给定点，实心点为给定点的中点)

按上面的说明，我们来更新代码:
封闭曲线的实现
??????? 可以看出，上述代码对于第一个点，最后一个点相关的“中点”都没有使用到。如果我们想利用到这两个点相关的“中点”来构成一个封闭的平滑曲线。那把所有的点均做为控制点来处理，使用它们的“中点”来做为每一个二次贝赛尔曲线的端点，如下代码所示：
?
注意上面的代码中的i，我们在第一个循环外也使用了i,这是因为JavaScript的变量作用域不是块级的，而是以函数来区分的,如：
   canvas用得出神入化~