本文实例为大家分享了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.代码实现
Title
4.结语
虽然只是一个简单的下落和弹起，但是为了弹起位移的实现整整花费本人6天的时间（主要是每天都思考怎么计算弹起位移）
主要开始的思路一直关注在
下落位移 （开口线上抛物线方程）
y = (1/2)gt^2
思考反弹的位移应该改是将抛物线沿x轴右移t1，得出
y = (1/2)g(t-t1)^2
有兴趣的同学可以试试看看效果
浏览器渲染反弹的效果不尽人意，所以一直没想出计算的位移方法，故使用数组实现
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。