html a标签指定区域,第四讲：使用html5中的canvas标签画出一个球在指定区域内的运动...

小球在一个区域运动

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

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

//定义一个小球

var ball = {

position : {x : 100,y : 100},//球的位置

r : 30,//球的半径

vx : 300,//球在X轴的速度

vy : 200//球在Y轴的速度

};

var cyc = 10;

var somethingAsync = eval(Jscex.compile("async", function () {

//结合物理里面的知识即可

while (true) {

cxt.fillStyle = "rgba(0, 0, 0, .1)";

cxt.fillRect(0, 0, canvas.width, canvas.height);

cxt.fillStyle = "#FA340A";

cxt.beginPath();

cxt.arc(ball.position.x, ball.position.y, ball.r, 0, Math.PI * 2, true);

cxt.closePath();

cxt.fill();

//与左右两边碰撞 只需X轴的方向相反即可

if(ball.position.x + ball.r > canvas.width || ball.position.x < ball.r ) ball.vx *= -1;

//上下两边相撞 只需Y轴的方向相反即可

if(ball.position.y + ball.r > canvas.height || ball.position.y < ball.r ) ball.vy *= -1;

//在判断完成之后 再进行球的移动

ball.position.x += ball.vx * cyc /1000;

ball.position.y += ball.vy * cyc /1000;

$await(Jscex.Async.sleep(cyc));

}

}));

somethingAsync().start();