码迷,mamicode.com
首页 > 其他好文 > 详细

canvas抛物线运动轨迹

时间:2017-04-07 14:39:33      阅读:637      评论:0      收藏:0      [点我收藏+]

标签:img   .com   span   idt   com   抛物线   canvas   坐标   int   

本来是想做一个贝塞尔曲线运动轨迹的

公式太复杂了,懒得算,公式在最后

技术分享

我先画了一个抛物线,我确定了两个点,起点(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.

canvas抛物线运动轨迹

标签:img   .com   span   idt   com   抛物线   canvas   坐标   int   

原文地址:http://www.cnblogs.com/anxiaoyu/p/6676957.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!