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，這樣可計算總時間。**如下：

此時水平速度為：4演示

第二種：h5中的canvas繪製小球和運動區域。

思路：採用canvas繪製小球，由於小球不能通過top和left移動，因此它需要每次呼叫都要用clearrect清空畫布，然後繪製計算後位置的小球。**如下：

兩個方式都能實現，計算的方式都是一樣的，只是方式不同。第乙個是偏css，採用了border-radius和動態修改dom，第二個採用canvas繪製圖形，繪製過程要好好研究。