JS小球抛物线轨迹运动的两种实现方法详解

本文实例讲述了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演示
  

第二种：h6中的canvas绘制小球和运动区域

思路：采用canvas绘制小球，由于小球不能通过top和left移动，因此它需要每次调用都要用clearRect清空画布，然后绘制计算后位置的小球。代码如下：

两个方式都能实现，计算的方式都是一样的，只是方式不同。第一个是偏css，采用了border-radius和动态修改DOM，第二个采用canvas绘制图形，绘制过程要好好研究。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript运动效果与技巧汇总》、《JavaScript动画特效与技巧汇总》、《JavaScript图形绘制技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。