canvas拋物線運動軌跡

本來是想做一個貝塞爾曲線運動軌跡的

公式太復雜了，懶得算，公式在最后

我先畫了一個拋物線，我確定了兩個點，起點（0,0），終點（200,200）

用坐標系可算出方程 y=-0.005x^2

現在找出終點的切線與X軸的交點，那個就是貝塞爾曲線的第二個參數，控制點

求出是（100,0）

 

現在重新繪制一個動態曲線，給X=X+0.1

y就是函數方程了y=0.005x^2  (注意沒有負號了）

這樣我們新繪制的線條就能在原來的紅色線條上移動了

var oQuadraticCurveTo = document.getElementById("canvas");
var oContext = oQuadraticCurveTo.getContext("2d");
var x=2;
drawLine();
    function drawLine(){
        oContext.beginPath();
        oContext.moveTo(0,0);                       //起始點（x,y）
        oContext.quadraticCurveTo(100, 0, 200, 200);    //創建二次貝塞爾曲線
        oContext.lineWidth = 2;
        oContext.strokeStyle = "tomato";
        oContext.stroke();
        oContext.closePath(); 
    }
    function drawPoint(x,y){
        oContext.beginPath();
        oContext.arc(x, y, 3, 0, 2 * Math.PI, false);
        oContext.fillStyle="red";
        oContext.fill();
        
        oContext.stroke();
        oContext.closePath();
    }

    //畫移動的線
    function drawMivie(){
        
        y=Math.pow(x,2)*0.005
        console.log(y);
        oContext.beginPath();
        oContext.moveTo(x,y); 
        x=x+0.1;
            
        if(x > 198){
            x=0;
        }else{
        //防止首位相連
        y=Math.pow(x,2)*0.005
        oContext.lineTo(x,y);
        oContext.strokeStyle = "white";
        oContext.lineWidth = 1;
        oContext.stroke();
        oContext.closePath();
        }
        

    }

    drawPoint(0,0);
    drawPoint(200,200);
    //定位到起點
    
    setInterval(function(){
            drawMivie();
        },1);
 

 

下面是一個改進版，小球沿着拋物線運動

 

var oQuadraticCurveTo = document.getElementById("canvas");
var oContext = oQuadraticCurveTo.getContext("2d");
var x=2; 

    function drawLine(){
        oContext.beginPath();
        oContext.moveTo(0,0);                       //起始點（x,y）
        oContext.quadraticCurveTo(100, 0, 200, 200);    //創建二次貝塞爾曲線
        oContext.lineWidth = 2;
        oContext.strokeStyle = "tomato";
        oContext.stroke();
        oContext.closePath(); 
    }
    function drawPoint(x,y){
        oContext.beginPath();
        oContext.arc(x, y, 3, 0, 2 * Math.PI, false);
        oContext.fillStyle="red";
        oContext.fill();
        
        oContext.stroke();
        oContext.closePath();

    }

    //畫移動的線
    function drawMivie(){
        
        y=Math.pow(x,2)*0.005;
      
            
        if(x > 198){
            x=0;
        }else{
        //防止首位相連
　　　　　//清楚之前的圖，重新繪制
        oContext.clearRect(0, 0, 500, 500);
        oContext.closePath();
        drawStatic(oContext);
        //
        x=x+1;   
        y=Math.pow(x,2)*0.005;
        //畫圓球
        oContext.beginPath();
        oContext.strokeStyle = "white";
        oContext.arc(x,y,5,0,2*Math.PI,false);
        oContext.fillStyle="white";
        oContext.fill();
        oContext.stroke();
        oContext.closePath();
        }
    }
    //畫靜態元素,紅線和兩端
    function drawStatic(){
        drawLine();
        drawPoint(0,0);
        drawPoint(200,200);
    }


    setInterval(function(){
            drawMivie(oContext);
        },20);
 

 

 

公式先丟出來，萬一以后真的要做復雜的曲線呢。。

用下列一組數據點P(0,1) P(1,1) P(1,0) 作為特征多邊形的頂點,構造一條貝齊爾曲線,寫出它的方程並作圖

n個數據點構成(n-1)次貝塞爾曲線,
三個數據點構成二次貝塞爾曲線,二次貝塞爾曲線參數方程
(1 - t)^2 P0 + 2 t (1 - t) P1 + t^2 P2;
曲線起點P0,終點P2,但一般不過P1點.

代入坐標后得到:
參數方程:
x = (1 - t)^2 * 0 + 2 t (1 - t) * 1 + t^2 * 1 = 2 t (1 - t) + t^2,
y= (1 - t)^2 * 1 + 2 t (1 - t) * 1 + t^2 * 0 = (1 - t)^2 + 2 t (1 - t) ,

消去參數 t 得到:
y = -1 + 2 Sqrt[1 - x] + x.