二階貝塞爾曲線公式如下：
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 參數，不要取的太小，否則會變成折線，也不要取的過大，否則會崩潰 :)
謝謝觀賞，如有錯誤，歡迎指出～
