JS⼩球抛物线轨迹运动的两种实现⽅法详解
本⽂实例讲述了JS⼩球抛物线轨迹运动的两种实现⽅法。分享给⼤家供⼤家参考，具体如下：
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，这样可计算总时间。代码如下：
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
/*给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;/*给div设置圆⾓*/
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;
}
</style>
</head>
<body>
<div id="bg">
此时⽔平速度为：4<button onclick="start()">演⽰</button>
<div id="ball"></div>
</div>
<script type="text/javascript">
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 = ElementById("ball");
//通过修改⼩球的top和left，修改⼩球的位置
p = y;
j.style.left = x;
k++;//每次调⽤，k⾃增，简化计算
if(x>480||y>480){
clearInterval(t);//⼩球达到边界时，清除setInterval
}
},100);//每0.1s调⽤⼀次setInterval的function
}
</script>
</body>
</html>
第⼆种：h5中的canvas绘制⼩球和运动区域
思路：采⽤canvas绘制⼩球，由于⼩球不能通过top和left移动，因此它需要每次调⽤都要⽤clearRect清空画布，然后绘制计算后位置的⼩球。代码如下：
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
#myCanvas {
box-shadow: -2px -2px 2px #efefef,5px 5px 5px #b9b9b9;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="600px" height="600px"></canvas>
<script type="text/javascript">
var x=50,y=50,k=1;
var ElementById("myCanvas");
var Context("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);
}
}
</script>
</body>
</html>
两个⽅式都能实现，计算的⽅式都是⼀样的，只是⽅式不同。第⼀个是偏css，采⽤了border-radius和动态修改DOM，第⼆个采⽤canvas绘制图形，绘制过程要好好研究。
更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》及《》
希望本⽂所述对⼤家JavaScript程序设计有所帮助。css实现垂直水平居中

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。