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 相关文章推荐
Javascript Object.extend
May 18 Javascript
JavaScript学习笔记记录我的旅程
May 23 Javascript
有关于eclipse配置spket需要注意的一些地方
Apr 07 Javascript
jQuery easyUI datagrid 增加求和统计行的实现代码
Jun 01 Javascript
微信小程序 LOL 英雄介绍开发实例
Sep 30 Javascript
JS DOMReady事件的六种实现方法总结
Nov 23 Javascript
基于JavaScript实现选项卡效果
Jul 21 Javascript
vue-cli中的webpack配置详解
Sep 25 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
Feb 06 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
Sep 03 Javascript
一文快速了解JQuery中的AJAX
May 31 jQuery
Node.js fs模块原理及常见用途
Oct 22 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
用文本文件制作留言板提示(上)
2006/10/09 PHP
PHP JSON格式数据交互实例代码详解
2011/01/13 PHP
ThinkPHP页面跳转success与error方法概述
2014/06/25 PHP
C# WinForm中实现快捷键自定义设置实例
2015/01/23 PHP
学习php设计模式 php实现状态模式
2015/12/07 PHP
PHP的PDO错误与错误处理
2019/01/27 PHP
PHP7匿名类的用法示例
2019/04/05 PHP
baidu博客的编辑友情链接的新的层窗口!经典~支持【FF】
2007/02/09 Javascript
js 数组的for循环到底应该怎么写?
2010/05/31 Javascript
JS焦点图切换,上下翻转
2011/05/12 Javascript
jquery中获取元素的几种方式小结
2011/07/05 Javascript
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
jquery 插件学习(五)
2012/08/06 Javascript
jquery判断浏览器类型的代码
2012/11/05 Javascript
javascript自定义startWith()和endWith()的两种方法
2013/11/11 Javascript
调整小数的格式保留小数点后两位
2014/05/14 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
2017/11/06 Javascript
Express的HTTP重定向到HTTPS的方法
2018/06/06 Javascript
通过JS深度判断两个对象字段相同
2019/06/14 Javascript
Vue+Element-UI实现上传图片并压缩
2019/11/26 Javascript
Python lambda和Python def区别分析
2014/11/30 Python
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
用Python读取几十万行文本数据
2018/12/24 Python
Python QQBot库的QQ聊天机器人
2019/06/19 Python
nginx黑名单和django限速,最简单的防恶意请求方法分享
2019/08/09 Python
Python实现图片识别加翻译功能
2019/12/26 Python
Python selenium 自动化脚本打包成一个exe文件(推荐)
2020/01/14 Python
VSCode中autopep8无法运行问题解决方案(提示Error: Command failed,usage)
2021/03/02 Python
纯CSS3实现表单验证效果(非常不错)
2017/01/18 HTML / CSS
html5新增的定时器requestAnimationFrame实现进度条功能
2018/12/13 HTML / CSS
美国在线面料商店:Online Fabric Store
2018/07/26 全球购物
String是最基本的数据类型吗?
2013/06/13 面试题
高三学习决心书
2014/03/11 职场文书
政风行风评议心得体会
2014/10/21 职场文书
全陪导游词
2015/02/04 职场文书
深入理解mysql事务隔离级别和存储引擎
2022/04/12 MySQL