本文实例为大家分享了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
有兴趣的同学可以试试看看效果
浏览器渲染反弹的效果不尽人意,所以一直没想出计算的位移方法,故使用数组实现
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年09月23日
2024年09月23日
- 华少翌.2005-华少翌【中唱艺能】【WAV+CUE】
- 群星《十二女声Ⅱ》[WAV/CUE/分轨][527MB]
- 大自然音乐系列《漫步在山裡》[WAV/CUE/分轨][502.8MB]
- 大自然音乐系列《星光夜语》[WAV/CUE/分轨][453.3MB]
- 史依弘《史依弘交响乐京剧演唱专辑HQ》头版限量编号[WAV+CUE]
- 曼丽2020《女人三十风继续吹》HQCD[WAV+CUE]
- 曼丽2021《女人三十2雾之恋》HQCD[WAV+CUE]
- 隔壁老樊.2019-我曾【好听音乐】【FLAC分轨】
- 高林生.1993-牵挂你的人是我【白天鹅】【WAV+CUE】
- 洪卓立.2012-找个懂我的女孩(国专)【英皇娱乐】【WAV+CUE】
- 曼丽2022《女人三十3晚秋》HQCD[WAV+CUE]
- 曼丽2018《女人三十4冬天》HQCD[WAV+CUE]
- 柏菲-《好歌30年壹》限量开盘母带ORMCD[低速原抓WAV+CUE]
- 大自然音乐系列《水舞》[WAV/CUE/分轨][424.3MB]
- 大自然音乐系列《星光夜语》[WAV/CUE/分轨][453.3MB]