本文實例講述了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 = 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}</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 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); }}</script></body></html>兩個方式都能實現，計算的方式都是一樣的，只是方式不同。第一個是偏css，采用了border-radius和動態修改DOM，第二個采用canvas繪制圖形，繪制過程要好好研究。
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
