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 相关文章推荐
TextArea 控件的最大长度问题(js json)
Dec 16 Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
Mar 29 Javascript
自编jQuery插件实现模拟alert和confirm
Sep 01 Javascript
js在指定位置增加节点函数insertBefore()用法实例
Jan 12 Javascript
jQuery中on绑定事件后引发的事件冒泡问题如何解决
May 25 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
Nov 04 Javascript
js+html制作简单验证码
Feb 16 Javascript
D3.js进阶系列之CSV表格文件的读取详解
Jun 06 Javascript
基于jQuery Easyui实现登陆框界面
Jul 10 jQuery
ES6中新增的Object.assign()方法详解
Sep 22 Javascript
js中this对象用法分析
Jan 05 Javascript
Vue底层实现原理总结
Feb 17 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原创论坛
2006/10/09 PHP
php基础知识:函数基础知识
2006/12/13 PHP
PHP 简单数组排序实现代码
2009/08/05 PHP
php 创建以UNIX时间戳命名的文件夹(示例代码)
2014/03/08 PHP
用js实现层随着内容大小动态渐变改变 推荐
2009/12/19 Javascript
js function使用心得
2010/05/10 Javascript
JavaScript 浏览器验证代码(来自discuz)
2010/07/17 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
2013/02/22 Javascript
HTML页面登录时的JS验证方法
2014/05/28 Javascript
NodeJs中的VM模块详解
2015/05/06 NodeJs
AngularJS 中文API参考手册
2016/07/28 Javascript
浅谈JS中的三种字符串连接方式及其性能比较
2016/09/02 Javascript
Iscrool下拉刷新功能实现方法(推荐)
2017/06/26 Javascript
Vue数据监听方法watch的使用
2018/03/28 Javascript
详解Vue取消eslint语法限制
2018/08/04 Javascript
javascript中关于类型判断的一些疑惑小结
2018/10/14 Javascript
JS动画实现回调地狱promise的实例代码详解
2018/11/08 Javascript
Nuxt.js开启SSR渲染的教程详解
2018/11/30 Javascript
解决layer.msg 不居中 ifram中的问题
2019/09/05 Javascript
JS实现烟花爆炸效果
2020/03/10 Javascript
[02:34]2016完美“圣”典风云人物:BurNIng专访
2016/12/10 DOTA
python批量下载图片的三种方法
2013/04/22 Python
Python简单实现自动删除目录下空文件夹的方法
2017/08/29 Python
python生成lmdb格式的文件实例
2018/11/08 Python
HTML5学习心得总结(推荐)
2016/07/08 HTML / CSS
国际书籍零售商:Wordery
2017/11/01 全球购物
机械工程系毕业生求职信
2013/09/27 职场文书
个人能力自我鉴赏
2014/01/25 职场文书
社区八一活动方案
2014/02/03 职场文书
酒店总经理助理职责
2014/02/12 职场文书
2014年酒店工作总结范文
2014/11/17 职场文书
2014初中数学教研组工作总结
2014/12/19 职场文书
民事答辩状范本
2015/05/21 职场文书
厉行节约工作总结
2015/08/12 职场文书
解析高可用Redis服务架构分析与搭建方案
2021/06/20 Redis
总结高并发下Nginx性能如何优化
2021/11/01 Servers