二阶贝塞尔曲线公式如下：
1.png
看起来有一点抽象，我们来推导一下二阶贝塞尔曲线的公式，如下图：
p1.png
二阶贝塞尔曲线的原理是，Q0 是 P0 到 P1 上的动点，Q1 是 P1 到 P2 上的动点，它们在 P0P1 和 P1P2 上是按比例移动的，也就是说，当 Q0 移动到 P0P1 的中点时，Q1 也恰好移动到 P1P2 的中点， Q0 移动到 P1 时，Q1 也恰好移动到 P2 。而 B(t) 是 Q0 到 Q1 的动点，它也是按比例移动的，B(t) 的轨迹，就是以 P0 为起始点，以 P2 为终止点，以 P1 为控制点的二阶贝塞尔曲线。有了这个原理，就可以推导公式了。
首先，Q0 和 Q1 两点的位置为：
2.png
3.png
根据二阶贝塞尔曲线原理，有：
7.png
而：
6.png
4.png
5.png
代入，得：
8.png
整理一下，就可以得到二阶贝塞尔曲线的公式了。
下面是二阶贝塞尔曲线的一个动图：
p2.gif
在 Cocos2D-JS 中，使用 cc.BezierTo 或者 cc.BezierBy 来创建贝塞尔曲线轨迹的动作，它们都接受两个参数，一个是持续时间，一个是点的数组。
在调试动作时让精灵做动作来观察效果不太直观，我们可以利用 cc.DrawNode 将轨迹画出来。代码如下：
var drawNode = new cc.DrawNode();
this.addChild(drawNode);
drawNode.drawQuadBezier(cc.p(0, cc.winSize.height/2), cc.p(300, -cc.winSize.height/2), cc.p(300, 100), 1000, 1, cc.color(0, 0, 0, 255));
绘制二阶贝塞尔曲线的 API 和实现为：
/**
* draws a cubic bezier path
* @override
* @param {cc.Point} origin
* @param {cc.Point} control1
* @param {cc.Point} control2
* @param {cc.Point} destination
* @param {Number} segments
* @param {Number} lineWidth
* @param {cc.Color} color
*/
drawCubicBezier: function (origin, control1, control2, destination, segments, lineWidth, color) {
lineWidth = lineWidth || this._lineWidth;
color = color || this.getDrawColor();
if (color.a == null)
color.a = 255;
var vertices = [], t = 0;
for (var i = 0; i < segments; i++) {
var x = Math.pow(1 - t, 3) * origin.x + 3.0 * Math.pow(1 - t, 2) * t * control1.x + 3.0 * (1 - t) * t * t * control2.x + t * t * t * destination.x;
var y = Math.pow(1 - t, 3) * origin.y + 3.0 * Math.pow(1 - t, 2) * t * control1.y + 3.0 * (1 - t) * t * t * control2.y + t * t * t * destination.y;
vertices.push(cc.p(x, y));
t += 1.0 / segments;
}
vertices.push(cc.p(destination.x, destination.y));
var element = new cc._DrawNodeElement(cc.DrawNode.TYPE_POLY);
element.verts = vertices;
element.lineWidth = lineWidth;
element.lineColor = color;
element.isStroke = true;
element.lineCap = "round";
this._buffer.push(element);
},
注意 segments 参数，不要取的太小，否则会变成折线，也不要取的过大，否则会崩溃 :)
谢谢观赏，如有错误，欢迎指出～
