html画布实现小球沿直线下落,js+html5实现的自由落体运动效果代码

本文实例讲述了js+html5实现的自由落体运动效果。分享给大家供大家参考，具体如下：

运行效果截图如下：

具体代码如下：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

canvas自由落体

var canvasheight = 500;

var canvaswidth = 500;

var g = 9.8;

var plusV = 0.5;

function Block(vo, x, y, width, height, g, context) {

var _self = this;

_self.vo = vo || 0;

_self.x = x;

_self.y = y;

_self.prevX = x;

_self.prevY = y;

_self.g = g;

_self.height = height;

_self.width = width;

_self.prevTime = new Date().getTime();

context.fillStyle = "black";

_self.down = function () {

var time = (new Date().getTime() - _self.prevTime) / 200,

y = _self.vo * time + 1 / 2 * _self.g * time * time + _self.y;

//console.log("down:time=" + time + ":y=" + y + ":" + _self.vo);

if (y + _self.height >= canvasheight) {

_self.g--;

_self.vo = _self.g * time;

_self.prevTime = new Date().getTime();

_self.up();

} else {

context.clearRect(_self.prevX, _self.prevY - 1, _self.prevX + _self.height, _self.prevY + _self.width);

context.fillRect(_self.x, y, _self.width, _self.height);

_self.prevX = x;

_self.prevY = y;

setTimeout(function () {

_self.down();

}, 30);

}

}

_self.up = function () {

var time = (new Date().getTime() - _self.prevTime) / 200,

v = _self.vo - _self.g * time,

y = canvasheight - _self.height - _self.vo * time + 1 / 2 * _self.g * time * time;

//console.log("up:time=" + time + ":v=" + v);

if (v <= 0) {

_self.vo = 0;

_self.y = y;

_self.prevTime = new Date().getTime();

if (y + _self.height < canvasheight) {

_self.down();

} else {

return;

}

} else {

context.clearRect(_self.prevX, _self.prevY - 1, _self.prevX + _self.height , _self.prevY + _self.width);

context.fillRect(x, y, _self.width, _self.height);

_self.prevX = x;

_self.prevY = y;

setTimeout(function () {

_self.up();

}, 30);

}

}

}

window.onload = function () {

var canvas = document.getElementById('canvas');

var context = canvas.getContext('2d');

height = canvas.offsetHeight;

var block = new Block(0, 100, 0, 20, 20, g, context);

block.down();

}

更多关于JavaScript运动相关内容感兴趣的读者可查看本站专题：《JavaScript运动效果与技巧汇总》

希望本文所述对大家JavaScript程序设计有所帮助。