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

一：貝塞爾曲線是什麼

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

二：使用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）運動完成