canvas抛物线运动轨迹
Posted 安筱雨
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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.
以上是关于canvas抛物线运动轨迹的主要内容,如果未能解决你的问题,请参考以下文章
[js高手之路]html5 canvas动画教程 - 重力摩擦力加速抛物线运动