小球沿貝塞爾二階曲線的運動

一：貝塞爾曲線是什么

利用三點控制，生成一條平滑的曲線，具體解析看這個貝塞爾曲線掃盲

二：使用canvas繪制小球沿貝塞爾曲線運動

貝塞爾曲線由三個點確定，起始點P0，中間點（控制點）P1，和終點P2。確定三個點之后，用canvas所有的quadraticCurveTo方法繪制二階貝塞爾曲線，小球的運動路徑就出現了。但是小球需要沿着曲線運動，小球的運動是一幀一幀的，每一幀處於不同的點位置，所以需要計算出一定間隔的點坐標集合，然后根據集合，改變小球的位置坐標，從而達到小球沿曲線運動的效果。

1.canvas 繪制貝塞爾二階曲線

quadraticCurveTo方法是canvas自帶的繪制貝塞爾二階曲線公式，傳入控制點和終點，畫出曲線

function draw_curve(obj) {
    //繪制2次貝塞爾曲線
    context.beginPath();
    context.moveTo(obj.p0_x,obj.p0_y);/*開始點*/
    context.quadraticCurveTo(obj.p1_x,obj.p1_y,obj.p2_x,obj.p2_y);/*前兩個是控制點坐標xy，后兩個是結束點坐標xy*/
    context.strokeStyle = "#000";
    context.stroke();
    context.closePath();
}

2.利用貝塞爾二階曲線公式計算出曲線某點坐標

我們知道了三點，起始點P0，中間點（控制點）P1，和終點P2。

二階曲線公式為B(t) = (1-t)^2 P0 + 2(1-t)tP1+ t^2P2;

這里的t是從0到0.99的數，可以取間隔0.01遞增

當t為0.05時候，曲線上面某點的坐標O(Ox,Oy)的計算為
Ox = (1-t)^2 P0x + 2(1-t)tP1x+ t^2P2x;
Oy = (1-t)^2 P0y + 2(1-t)tP1y+ t^2P2y;

//利用貝塞爾曲線公式計算出曲線上某點坐標
function get_bezier_dot(t,obj){
    var x = (1-t)*(1-t)*obj.p0_x + 2*t*(1-t)*obj.p1_x + t*t*obj.p2_x;
    var y = (1-t)*(1-t)*obj.p0_y + 2*t*(1-t)*obj.p1_y + t*t*obj.p2_y;
    return {x:x,y:y}
}

3.畫圓方法,傳入位置坐標

function draw_ball(x,y) {
    context.beginPath();
    context.fillStyle = '#00E5EE';
    context.arc(x, y,30, 0, Math.PI * 2);
    context.fill();
    context.stroke();
    context.closePath();
}

4.每一幀動畫動畫執行流程draw_frame()

（1）傳入t，計算出這個曲線t時刻的點坐標,利用貝塞爾二階公式get_bezier_dot()
（2）繪制貝塞爾曲線用quadraticCurveTo()
（3）根據（1）得到的坐標點用context.arc()畫出此時的圓在canvas上面
（4）可以再畫出坐標文字在圖上context.fillText(text, x, y);

5.整體運動軌跡流程：

（1）每隔一定時間間隔畫一幀的內容setInterval()
（2）清空畫布，清空上一幀的畫布clearRect()
（3）傳入t，計算出坐標O',根據O'的坐標位置畫此幀的內容，即上面每幀的動畫流程draw_frame()
（4）此時t增加0.01,當t>0.99的時候clearInterval()
（5）運動完成