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 相关文章推荐
跨浏览器的设置innerHTML方法
Sep 18 Javascript
一个选择最快的服务器转向代码
Apr 27 Javascript
jquery 追加tr和删除tr示例代码
Sep 12 Javascript
jQuery的:parent选择器定义和用法
Jul 01 Javascript
JS图片左右无缝隙滚动的实现(兼容IE,Firefox 遵循W3C标准)
Sep 23 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
Nov 16 Javascript
JS实现侧边栏鼠标经过弹出框+缓冲效果
Mar 29 Javascript
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
Vue实现web分页组件详解
Nov 28 Javascript
react 实现页面代码分割、按需加载的方法
Apr 03 Javascript
基于vue中keep-alive缓存问题的解决方法
Sep 21 Javascript
JavaScript canvas实现流星特效
May 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
CI框架集成Smarty的方法分析
2016/05/17 PHP
PHP类相关知识点实例总结
2016/09/28 PHP
什么是PHP文件?如何打开PHP文件?
2017/06/27 PHP
PHP小白必须要知道的php基础知识(超实用)
2017/10/10 PHP
JS 时间显示效果代码
2009/08/23 Javascript
Javascript面象对象成员、共享成员变量实验
2010/11/19 Javascript
JavaScript控制Session操作方法
2013/01/17 Javascript
Google (Local) Search API的简单使用介绍
2013/11/28 Javascript
jquery.validate.js插件使用经验记录
2014/07/02 Javascript
jQuery获取节点和子节点文本的方法
2014/07/22 Javascript
JavaScript实现三阶幻方算法谜题解答
2014/12/29 Javascript
配置Grunt的Task时通配符支持和动态生成文件名问题
2015/09/06 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
2016/05/18 Javascript
javascript汉字拼音互转的简单实例
2016/10/09 Javascript
Bootstrap复选框和单选按钮美化插件(推荐)
2016/11/23 Javascript
原生js更改css样式的两种方式
2017/03/15 Javascript
简单的Vue异步组件实例Demo
2017/12/27 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
2018/02/07 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
2018/02/21 Javascript
Nodejs异步流程框架async的方法
2019/06/07 NodeJs
vue如何实现自定义底部菜单栏
2019/07/01 Javascript
Vue-cli 移动端布局和动画使用详解
2020/08/10 Javascript
[13:56]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第一场
2018/04/06 DOTA
pyqt4教程之widget使用示例分享
2014/03/07 Python
Python首次安装后运行报错(0xc000007b)的解决方法
2016/10/18 Python
python Manager 之dict KeyError问题的解决
2019/12/21 Python
使用python-pptx包批量修改ppt格式的实现
2020/02/14 Python
Python tkinter界面实现历史天气查询的示例代码
2020/08/23 Python
CSS3实例分享--超炫checkbox复选框和radio单选框
2014/09/01 HTML / CSS
销售自荐信
2013/10/22 职场文书
成人高等教育毕业生自我鉴定
2013/10/22 职场文书
违反课堂纪律检讨书
2014/01/19 职场文书
请假条格式范文
2014/04/10 职场文书
2014年五四青年节演讲稿范文
2014/04/22 职场文书
学校实习推荐信
2015/03/27 职场文书
2019年聘任书的写作格式及范文!
2019/07/03 职场文书