本文主要介绍了JS小球抛物线轨迹运动的两种实现方法,结合实例形式分析了javascript实现小球抛物线运动的相关计算与图形绘制操作技巧,需要的朋友可以参考下，希望能帮助到大家。

js实现小球抛物轨迹运动的大致思路：

1、用setInterval()方法，进行间隔性刷新，更新小球位置，以实现动态效果

2、绘制小球和运动区域，运动区域可通过flex布局实现垂直居中

3、用物理公式S(y)=1/2*g*t*t，S(x)=V(x)t来计算路径

现确定V(x)=4m/s,刷新的时间间隔设置为0.1s。原本px和米之间的转换，不同尺寸转换不同，本例采用17寸显示器，大约1px=0.4mm。但浏览器太小，因此只能模拟抛物线轨迹，本例将px和米之间缩成100倍。

第一种：通过border-radius绘制小球

思路：用border-radius: 50%绘制小球，给小球设置relative，每次计算小球当前位置，赋给top和left。计算运动轨迹时，可用变量自增计算setInterval调用次数，每次是0.1s，这样可计算总时间。代码如下：

/*给body进行flex布局，实现垂直居中*/

body {

min-height: 100vh;/*高度适应浏览器高度*/

display: flex;

justify-content: center;/*水平居中*/

align-items: center;/*垂直居中*/

font-size: 20px;

font-weight: bold;

}

/*设置运动区域*/

#bg {

width: 600px;

height: 600px;

border: 2px solid #e0e0e0;

border-radius: 4px;/*给p设置圆角*/

padding: 20px;

}

/*生成小球，并定义初始位置*/

#ball {

border-radius: 50%;/*可把正方形变成圆形，50%即可*/

background: #e0e0e0;

width: 60px;

height: 60px;

position: relative;

top: 30px;

left: 30px;

}

button {

width: 80px;

height: 30px;

border-radius: 4px;

color: #fff;

background: #AA7ECC;

font-size: 20px;

font-weight: bold;

margin-left: 20px;

}

此时水平速度为：4演示

function start(){

var x,y,k=1,t;

//x是水平方向移动路径；y是垂直方向的；k记录次数，可与0.1相乘得时间；t记录setInterval的返回id，用于clearInterval

t = setInterval(function(){

x = 30+0.1*k*4*100;

//S(x)=S(0)+t*V(x)，100是自定义的米到px转换数

y = 30+1/2*9.8*0.1*k*0.1*k*100;//S(y)=S(0)+1/2*g*t*t

var j = document.getElementById("ball");

//通过修改小球的top和left，修改小球的位置

j.style.top = y;

j.style.left = x;

k++;//每次调用，k自增，简化计算

if(x>480||y>480){

clearInterval(t);//小球达到边界时，清除setInterval

}

},100);//每0.1s调用一次setInterval的function

}

第二种：h5中的canvas绘制小球和运动区域

思路：采用canvas绘制小球，由于小球不能通过top和left移动，因此它需要每次调用都要用clearRect清空画布，然后绘制计算后位置的小球。代码如下：

body {

min-height: 100vh;

display: flex;

justify-content: center;

align-items: center;

}

#myCanvas {

box-shadow: -2px -2px 2px #efefef,5px 5px 5px #b9b9b9;

}

var x=50,y=50,k=1;

var c=document.getElementById("myCanvas");

var cxt=c.getContext("2d");

cxt.fillStyle="#e0e0e0";

cxt.beginPath();

cxt.arc(x,y,30,0,Math.PI*2,true);

cxt.closePath();

cxt.fill();

t=setInterval("parabola()",100);

function parabola(){

cxt.clearRect(0,0,600,600);//清除原始图形

cxt.beginPath();

x=50+0.1*k*4*100;y=50+9.8*0.1*k*0.1*k*1/2*100;

cxt.arc(x,y,30,0,Math.PI*2,true);

cxt.closePath();

cxt.fill();

k++;

if(x>520||y>520){

clearInterval(t);

}

}

两个方式都能实现，计算的方式都是一样的，只是方式不同。第一个是偏css，采用了border-radius和动态修改DOM，第二个采用canvas绘制图形，绘制过程要好好研究。

相关推荐：