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

