本文實例為大家分享了js實現自由落體效果的具體代碼，供大家參考，具體內容如下
1.效果圖
2.實現分析
利用Canvas畫圓球、地面；
1.下落過程
物理知識回顧，物體下落過程（不計損耗）由重力勢能轉換成動能
重力勢能 Ep = mgh
動能 Ek = (1/2)mv^2
速度右0增加至gt
此間需要計算瀏覽器每次渲染的圓球y坐標
y = (1/2)gt^2
2.反彈過程
動能轉化成重力勢能
速度是逐漸減少直至為0
本打算設置 y = (1/2)g(t-t1)^2，t1為下落或者反彈消耗的時長
但是實際呈現的效果卻不盡人意，應該是反彈位移計算有誤，經反復思考無果（若哪位大拿有更好的實現方式歡迎評論告知）
所以決定將下落過程的位移保存在一個數組里，待反彈時再逐一取出賦值
3.代碼實現
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body { padding: 0; margin: 0; background-color: rgba(0, 0, 0, 1); } #canvas{ display: block; margin: 10px auto; } </style></head><body><canvas id="canvas" width="600" height="600">your browser is not support canvas</canvas><script type="text/javascript"> //自由落體 H=(gt^2)/2 動能 Ek=(mv^2)/2 重力勢能:Ep = mgh let x=300,y=60, //圓心坐標 minHeight = 60, //最小下落位移 maxHeight = 446, //最大下落位移 dir = true; //dir true下落，false為彈起 (function(){ let canvas= document.getElementById('canvas'); let ctx = canvas.getContext('2d'); draw(ctx); })(); function draw(ctx){ let currentTime = new Date().getTime(); //開始毫秒數,折返記錄一次currentTime let arr_y = []; //設置下落位移的數組 window.requestAnimationFrame(function init(){ if(dir){ if(y >= maxHeight){ dir = false; currentTime = new Date().getTime(); }else{ y = y + Math.pow((new Date().getTime() - currentTime)/1000,2)*10/2; arr_y.push(y); } }else{ if(y <= minHeight){ dir = true; currentTime = new Date().getTime(); }else{ y = arr_y.splice(-1,1)[0] || 60; } } drawArc(ctx,x,y); requestAnimationFrame(init); }); } //繪制圓球和地面 function drawArc(ctx,x,y){ ctx.clearRect(0, 0, 600, 600); ctx.beginPath(); ctx.arc(x,y,50,0,Math.PI*2); ctx.fillStyle='#98adf0'; ctx.fill(); ctx.save(); ctx.beginPath(); ctx.strokeStyle = '#ffffff'; ctx.moveTo(0,500); ctx.lineTo(600,500); ctx.lineWidth = 4; ctx.stroke(); ctx.closePath(); ctx.save(); }</script></body></html>4.結語
雖然只是一個簡單的下落和彈起，但是為了彈起位移的實現整整花費本人6天的時間（主要是每天都思考怎么計算彈起位移）
主要開始的思路一直關注在
下落位移 （開口線上拋物線方程）
y = (1/2)gt^2
思考反彈的位移應該改是將拋物線沿x軸右移t1，得出
y = (1/2)g(t-t1)^2
有興趣的同學可以試試看看效果
瀏覽器渲染反彈的效果不盡人意，所以一直沒想出計算的位移方法，故使用數組實現
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
