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


Posted in Javascript onDecember 20, 2017

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

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

1、用setInterval()方法,进行间隔性刷新,更新小球位置,以实现动态效果
2、绘制小球和运动区域,运动区域可通过flex布局实现垂直居中
3、用物理公式S(y)=1/2*g*t*tS(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,这样可计算总时间。代码如下:

<!DOCTYPE>
<html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title></title>
  <style type="text/css">
  /*给body进行flex布局,实现垂直居中*/
  body {
  min-height: 100vh;/*高度适应浏览器高度*/
  display: flex;
  justify-content: center;/*水平居中*/
  align-items: center;/*垂直居中*/
    font-size: 20px;
    font-weight: bold;
  }
  /*设置运动区域*/
  #bg {
    width: 600px;
    height: 600px;
    border: 2px solid #e0e0e0;
    border-radius: 4px;/*给div设置圆角*/
    padding: 20px;
  }
  /*生成小球,并定义初始位置*/
  #ball {
    border-radius: 50%;/*可把正方形变成圆形,50%即可*/
    background: #e0e0e0;
    width: 60px;
    height: 60px;
    position: relative;
    top: 30px;
    left: 30px;
  }
  button {
    width: 80px;
    height: 30px;
    border-radius: 4px;
    color: #fff;
    background: #AA7ECC;
    font-size: 20px;
    font-weight: bold;
    margin-left: 20px;
  }
  </style>
</head>
<body>
<div id="bg">
  此时水平速度为:4<button onclick="start()">演示</button>
  <div id="ball"></div>
</div>
<script type="text/javascript">
function start(){
  var x,y,k=1,t;
  //x是水平方向移动路径;y是垂直方向的;k记录次数,可与0.1相乘得时间;t记录setInterval的返回id,用于clearInterval
  t = setInterval(function(){
  x = 30+0.1*k*4*100;
    //S(x)=S(0)+t*V(x),100是自定义的米到px转换数
    y = 30+1/2*9.8*0.1*k*0.1*k*100;//S(y)=S(0)+1/2*g*t*t
  var j = document.getElementById("ball");
    //通过修改小球的top和left,修改小球的位置
    j.style.top = y;
    j.style.left = x;
  k++;//每次调用,k自增,简化计算
  if(x>480||y>480){
  clearInterval(t);//小球达到边界时,清除setInterval
  }
  },100);//每0.1s调用一次setInterval的function
}
</script>
</body>
</html>

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

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

<!DOCTYPE>
<html>
<head>
  <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
  <title></title>
  <style type="text/css">
  body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  }
  #myCanvas {
  box-shadow: -2px -2px 2px #efefef,5px 5px 5px #b9b9b9;
  }
  </style>
</head>
<body>
<canvas id="myCanvas" width="600px" height="600px"></canvas>
<script type="text/javascript">
var x=50,y=50,k=1;
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#e0e0e0";
cxt.beginPath();
cxt.arc(x,y,30,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
t=setInterval("parabola()",100);
function parabola(){
  cxt.clearRect(0,0,600,600);//清除原始图形
  cxt.beginPath();
  x=50+0.1*k*4*100;y=50+9.8*0.1*k*0.1*k*1/2*100;
  cxt.arc(x,y,30,0,Math.PI*2,true);
  cxt.closePath();
  cxt.fill();
  k++;
  if(x>520||y>520){
  clearInterval(t);
  }
}
</script>
</body>
</html>

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

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

Javascript 相关文章推荐
JS实现商品倒计时实现代码
May 03 Javascript
文件编码导致jquery失效的解决方法
Jun 26 Javascript
php读取sqlite数据库入门实例代码
Jun 25 Javascript
JQuery节点元素属性操作方法
Jun 11 Javascript
Vue之Watcher源码解析(2)
Jul 19 Javascript
JavaScript实现的数字与字符串转换功能示例
Aug 23 Javascript
基于 Vue 实现一个酷炫的 menu插件
Nov 14 Javascript
Vue2.0 slot分发内容与props验证的方法
Dec 12 Javascript
vue项目中api接口管理总结
Apr 20 Javascript
详解几十行代码实现一个vue的状态管理
Jan 28 Javascript
vue.js多页面开发环境搭建过程
Apr 24 Javascript
vue通过接口直接下载java生成好的Excel表格案例
Oct 26 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
Dec 20 #Javascript
axios中cookie跨域及相关配置示例详解
Dec 20 #Javascript
JavaScript实现重力下落与弹性效果的方法分析
Dec 20 #Javascript
axios进阶实践之利用最优雅的方式写ajax请求
Dec 20 #Javascript
vue.js $refs和$emit 父子组件交互的方法
Dec 20 #Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 #jQuery
详解Vue 中 extend 、component 、mixins 、extends 的区别
Dec 20 #Javascript
You might like
PHP与C#分别格式化文件大小的代码
2011/05/14 PHP
php+mysqli实现将数据库中一张表信息打印到表格里的方法
2015/01/28 PHP
PHP调用存储过程返回值不一致问题的解决方法分析
2016/04/26 PHP
php批量删除操作代码分享
2017/02/26 PHP
区分JS中的undefined,null,&quot;&quot;,0和false
2007/03/08 Javascript
用js实现随机返回数组的一个元素
2007/08/13 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
2014/02/07 Javascript
JQuery CheckBox(复选框)操作方法汇总
2015/04/15 Javascript
Bootstrap的图片轮播示例代码
2015/08/31 Javascript
jQuery自定义滚动条完整实例
2016/01/08 Javascript
理解javascript中的with关键字
2016/02/15 Javascript
js通过指定下标或指定元素进行删除数组的实例
2017/01/12 Javascript
vue多种弹框的弹出形式的示例代码
2017/09/18 Javascript
关于axios不能使用Vue.use()浅析
2018/01/12 Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
2019/01/20 Javascript
深入解读Node.js中的koa源码
2019/06/17 Javascript
JS中的算法与数据结构之常见排序(Sort)算法详解
2019/08/16 Javascript
JS模拟浏览器实现全局搜索功能
2019/09/11 Javascript
谈谈IntersectionObserver懒加载的具体使用
2019/10/15 Javascript
使用JavaScript通过前端发送电子邮件
2020/05/22 Javascript
python的random模块及加权随机算法的python实现方法
2017/01/04 Python
详解Python异常处理中的Finally else的功能
2017/12/29 Python
python将文本中的空格替换为换行的方法
2018/03/19 Python
python 基于opencv 绘制图像轮廓
2020/12/11 Python
娇韵诗法国官网:Clarins法国
2019/01/29 全球购物
意大利买卖二手奢侈品网站:LAMPOO
2020/06/03 全球购物
怎样创建、运行java程序
2014/08/01 面试题
机关单位动员会主持词
2014/03/20 职场文书
学生评语大全
2014/04/18 职场文书
敬老院院长事迹材料
2014/05/21 职场文书
市场推广策划方案
2014/06/02 职场文书
2015年酒店前台工作总结
2015/04/20 职场文书
《叶问2》观后感
2015/06/15 职场文书
远程教育培训心得体会
2016/01/09 职场文书
详解nginx location指令
2022/01/18 Servers
详解Python+OpenCV进行基础的图像操作
2022/02/15 Python