加入收藏 | 设为首页 | 会员中心 | 我要投稿 晋中站长网 (https://www.0354zz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 创业 > 经验 > 正文

基于HTML5的小球物理测试系统,附实现原理

发布时间:2018-10-07 09:15:06 所属栏目:经验 来源:站长网
导读:在线演示:基于HTML5的小球物理测试系统 源码下载:点击进入下载页 功能说明: 一个基于HTML5 canvas的小球物理测试系统,用户可以手动为新的小球设置不同的属性值(颜色,半径,速度等),从而在canvas中发射小球,小球在 运动 过程中会收到重力,弹性以
副标题[/!--empirenews.page--]

在线演示:基于HTML5的小球物理测试系统

源码下载:点击进入下载页

功能说明:

一个基于HTML5 canvas的小球物理测试系统,用户可以手动为新的小球设置不同的属性值(颜色,半径,速度等),从而在canvas中发射小球,小球在运动过程中会收到重力,弹性以及摩擦力的影响。

实现原理:

在小球飞行过程中,以初始速度,入射角以及重力系数作为依据,正交分解得出小球X轴和Y轴上的分速度,通过定时器不断刷新canvas,显示出小球飞行的动画。当小球和墙壁产生碰撞时,以小球弹性为依据计算能量损耗,当小球在墙壁滚动时,以墙壁摩擦系数为依据计算其能量损耗。

代码分析:

var bounceWall = (function() {


return function(canvasId,backgroundColor) {
this.init(canvasId, backgroundColor);

}
})();

构造函数,其中调用了prototype中的init方法进行初始化。需要传入的参数是canvas的ID,和canvas的背景色,如果不传入backgroundColor参数,背景色默认为黑色。

bounceWall.prototype = (function() {

var CanvasSupport = Modernizr.canvas; //检查浏览器是否支持canvas
var newBall = function(radius, color, speed, direction, currentX, currentY, elasticity) {

this.radius = parseFloat(radius); //半径
this.color = color; //颜色
this.speed = parseFloat(speed); //速度
this.elasticity = parseFloat(elasticity); //弹性
this.direction = parseFloat(direction); //入射角
this.currentX = parseFloat(currentX); //初始X坐标
this.currentY = parseFloat(currentY); //初始Y坐标
this.dx = speed * Math.cos(this.direction * Math.PI / 180); //计算其X轴方向的初始速度
this.dy = speed * Math.sin(this.direction * Math.PI / 180); //计算其Y轴方向的初始速度
this.nextX = this.currentX + this.dx; //根据速度和初速度得出其下次移动到的X坐标
this.nextY = this.currentY + this.dy; //根据速度和初速度得出其下次移动到的Y坐标


};

开始进入到bounce wall的prototype,首先使用Modernizr检测是否可以使用canvas。Modernizr是一个可以用于检测浏览器是否支持一些新功能的js库,可以下载直接使用。

之后出现的是小球的构造函数newBall,用户需要传入一系列的特性对其进行初始化,具体已经在注释中标出。需要特别注意的是其中的nextX和nextY记录的是小球下一次出现位置的坐标,它根据现在的位置(currentX和currentY)以及小球X轴和Y轴上的分速度(dx和dy)计算得出。nextX和nextY属性的用处主要是保证小球能和墙壁发生完全的碰撞,会在后面的代码分析。

    /* 绘制canvas的背景 */
var drawBackground = function(contextObj, backgroundColor, canvasWidth, canvasHeight) {

contextObj.fillStyle = backgroundColor;
contextObj.fillRect(0, 0, parseInt(canvasWidth), parseInt(canvasHeight));

};

(编辑:晋中站长网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

热点阅读