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 相关文章推荐
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
Jul 21 Javascript
js实现页面转发功能示例代码
Aug 05 Javascript
jQuery找出网页上最高元素的方法
Mar 20 Javascript
每天一篇javascript学习小结(基础知识)
Nov 10 Javascript
node.js实现爬虫教程
Aug 25 Javascript
EasyUI Pagination 分页的两种做法小结
Jul 09 Javascript
AngularJS 过滤与排序详解及实例代码
Sep 14 Javascript
关于Vue的路由权限管理的示例代码
Mar 06 Javascript
解决vue-cli项目打包出现空白页和路径错误的问题
Sep 04 Javascript
JavaScript实现页面中录音功能的方法
Jun 04 Javascript
Vue组件通信$attrs、$listeners实现原理解析
Sep 03 Javascript
关于JavaScript轮播图的实现
Nov 20 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
十大“创意”战术!
2020/03/04 星际争霸
php获取文章上一页与下一页的方法
2014/12/01 PHP
php实现mysql备份恢复分卷处理的方法
2014/12/26 PHP
合格的PHP程序员必备技能
2015/11/13 PHP
Laravel框架运行出错提示RuntimeException No application encryption key has been specified.解决方法
2019/04/02 PHP
JS特殊函数(Function()构造函数、函数直接量)区别介绍
2013/05/19 Javascript
JS解决ie6下png透明的方法实例
2013/08/02 Javascript
关于JS中的闭包浅谈
2013/08/23 Javascript
Egret引擎开发指南之运行项目
2014/09/03 Javascript
纯javascript响应式树形菜单效果
2015/11/10 Javascript
AngularJS表达式讲解及示例代码
2016/08/16 Javascript
JS判断键盘是否按的回车键并触发指定按钮点击操作的方法
2017/02/13 Javascript
Vue学习笔记之表单输入控件绑定
2017/09/05 Javascript
jquery实现Ajax请求的几种常见方式总结
2019/05/28 jQuery
JS实现碰撞检测效果
2020/03/12 Javascript
详解vue修改elementUI的分页组件视图没更新问题
2020/11/13 Javascript
flask中使用SQLAlchemy进行辅助开发的代码
2013/02/10 Python
python使用super()出现错误解决办法
2017/08/14 Python
详谈Python高阶函数与函数装饰器(推荐)
2017/09/30 Python
Python操作mongodb的9个步骤
2018/06/04 Python
Python合并多个Excel数据的方法
2018/07/16 Python
python实现剪切功能
2019/01/23 Python
Python实现的读取文件内容并写入其他文件操作示例
2019/04/09 Python
Python操作Mongodb数据库的方法小结
2019/09/10 Python
python单向循环链表原理与实现方法示例
2019/12/03 Python
关于Pytorch MaxUnpool2d中size操作方式
2020/01/03 Python
借助Paramiko通过Python实现linux远程登陆及sftp的操作
2020/03/16 Python
Jupyter打开图形界面并画出正弦函数图像实例
2020/04/24 Python
通过实例简单了解python yield使用方法
2020/08/06 Python
纯html5+css3下拉导航菜单实现代码
2013/03/18 HTML / CSS
加拿大奢华时装品牌:Mackage
2018/01/10 全球购物
安全目标管理责任书
2014/07/25 职场文书
2014年妇联工作总结
2014/11/21 职场文书
2016入党积极分子党校培训心得体会
2016/01/06 职场文书
银行文明优质服务培训心得体会
2016/01/09 职场文书
使用css样式设计一个简单的html登陆界面的实现
2021/03/30 HTML / CSS