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

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

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

最后进入到返回的object,它作为bounceWall的prototype。其中有init的方法,如果浏览器不支持canvas则返回,否则初始化一切初始属性,并启动setInternal定时器定时更新canvas的状态。

        /* 添加小球 */
createBall: function(radius, color, speed, direction, currentX, currentY, elasticity) {// 小球半径 颜色 速度 方向

var ball = new newBall(radius, color, speed, direction, currentX, currentY, elasticity);


this.ballArray.push(ball);

}

}

})();

添加小球的方法,demo中,该方法在“添加小球”的事件处理程序中被调用,根据用户输入数据进行新小球的添加。

   var wall = new bounceWall('wallCanvas', '#000');     //创建bounce wall

var radiusInput = util.$('radiusInput'); //半径输入文本框
var color_Input = util.$('color_Input'); //颜色输入文本框
var speed_Input = util.$('speed_Input'); //速度输入文本框
var elaticity_Input = util.$('elaticity_Input'); //弹性输入文本框
var inAngle_Input = util.$('inAngle_Input'); //入射角输入文本框
var X_Input = util.$('X_Input'); //初始X坐标输入文本框
var Y_Input = util.$('Y_Input'); //初始Y坐标输入文本框


var btn = util.$('add_btn'); //添加小球按钮
btn.onclick = function() { //绑定事件处理程序,调用creatBall方法创建新小球
wall.createBall(radiusInput.value, color_Input.value, speed_Input.value, inAngle_Input.value, X_Input.value, Y_Input.value, elaticity_Input.value);

}

(编辑:晋中站长网)

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

热点阅读