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

前端之家收集整理的这篇文章主要介绍了JS小球抛物线轨迹运动的两种实现方法详解前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

@H_403_0@本文实例讲述了JS小球抛物线轨迹运动的两种实现方法分享给大家供大家参考,具体如下:


@H_4030@js实现小球抛物轨迹运动的大致思路:


@H
403_0@1、用setInterval()方法,进行间隔性刷新,更新小球位置,以实现动态效果
2、绘制小球和运动区域,运动区域可通过flex布局实现垂直居中
3、用物理公式<span style="color: #0000ff">S(y)=1/2gt*t,<span style="color: #0000ff">S(x)=V(x)t来计算路径
现确定<span style="color: #0000ff">V(x)=4m/s,刷新的时间间隔设置为0.1s。原本px和米之间的转换,不同尺寸转换不同,本例采用17寸显示器,大约1px=0.4mm。但浏览器太小,因此只能模拟抛物线轨迹,本例将px和米之间缩成100倍。


@H_4030@<span style="font-size: medium">

第一种:通过border-radius绘制小球


@H
403_0@思路:用border-radius: 50%绘制小球,给小球设置relative,每次计算小球当前位置,赋给top和left。计算运动轨迹时,可用变量自增计算setInterval调用次数,每次是0.1s,这样可计算总时间。代码如下:


<div class="jb51code">
<pre class="brush:js;">
<!DOCTYPE>

@H_403_0@第二种:h5中的canvas绘制小球和运动区域

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

@H_403_0@两个方式都能实现,计算的方式都是一样的,只是方式不同。第一个是偏css,采用了修改DOM,第二个采用canvas绘制图形,绘制过程要好好研究。

@H_403_0@更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《》、《》、《》、《》、《》、《》及《用法总结》

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

猜你在找的JavaScript相关文章