# html5--质点运动与反射

物体在一条直线上运动，且在任意相等的时间间隔内位移相等，这种运行称为匀速直线运动。

在台球的实验中，按照如下方式定义小球：

var ball = {
position: { x: 100, y: 100 },
r: 15
};

其中包含了小球的位置和半径两个属性，因为要用小球来做物理实验，所以为小球增加两上属性，VX和VY，分别代表小球沿X轴方向和Y轴方向上的速度，这在物理学上叫做　运动独立性原理：

var ball = {
position: { x: 100, y: 100 },
r: 15,
vx: 190,
vy: 110
};

定义好了小球的速度，如何把它的运动状态体现在Canvas中呢？在以前的例子中，已经用到了Jscex来实现，这里我们继续使用。

首先我们要引用类库文件：

<script src="../../Scripts/jscex.jscexRequire.min.js" type="text/javascript"></script>

<canvas id="myCanvas" width="600" height="500">

</canvas>
<script type="text/javascript">
var c = document.getElementById("myCanvas");
var cxt = c.getContext("2d");
var ball = {
position: { x: 100, y: 100 },
r: 15,
vx: 190,
vy: 110
};
var cyc = 10;
var moveAsync = eval(Jscex.compile("async", function () {
while (true) {
cxt.fillStyle = "rgba(0,0,0,.3)";
cxt.fillRect(0, 0, c.width, c.height);
cxt.fillStyle = "#fff";
cxt.beginPath();
cxt.arc(ball.position.x, ball.position.y, ball.r, 0, Math.PI * 2, true);
cxt.closePath();
cxt.fill();
ball.position.x += ball.vx * cyc / 1000;
ball.position.y += ball.vy * cyc / 1000;
$await(Jscex.Async.sleep(cyc)); } })); moveAsync().start(); </script> 也可以让小球往返不停的运动： <canvas id="myCanvas" width="600" height="500"> 你的浏览器不支持canvas </canvas> <script type="text/javascript"> var c = document.getElementById("myCanvas"); var cxt = c.getContext("2d"); var ball = { position: { x: 100, y: 100 }, r: 15, vx: 190, vy: 110 }; var cyc = 10; var moveAsync = eval(Jscex.compile("async", function () { while (true) { while (ball.position.x < 600) { cxt.fillStyle = "rgba(0,0,0,.3)"; cxt.fillRect(0, 0, c.width, c.height); cxt.fillStyle = "#fff"; cxt.beginPath(); cxt.arc(ball.position.x, ball.position.y, ball.r, 0, Math.PI * 2, true); cxt.closePath(); cxt.fill(); ball.position.x += ball.vx * cyc / 1000; ball.position.y += ball.vy * cyc / 1000;$await(Jscex.Async.sleep(cyc));
}
while (ball.position.x > 0) {
cxt.fillStyle = "rgba(0,0,0,.3)";
cxt.fillRect(0, 0, c.width, c.height);
cxt.fillStyle = "#fff";
cxt.beginPath();
cxt.arc(ball.position.x, ball.position.y, 15, 0, Math.PI * 2, true);
cxt.closePath();
cxt.fill();
ball.position.x -= ball.vx * cyc / 1000;
ball.position.y -= ball.vy * cyc / 1000;
$await(Jscex.Async.sleep(cyc)); } } })); moveAsync().start(); </script> 可以看到上面的代码共有3个while，从上到下依次无限循环执行下去，效果如下所示： 倘若小球和四壁碰撞，就会发生反射，反弹符合反射定律。 所以在Canvas中模拟的结果就是：当小球与上下壁相撞时，Y轴速度方向变成其反方向，大小写不变，X轴速度不变；当小球与左右两壁纸碰撞时，X轴速度方向变成其反方向，大小写不变，Y轴速度大小方向都不变，可以得出： cxt.fillStyle = "rgba(0,0,0,.3)"; cxt.fillRect(0, 0, c.width, c.height); cxt.fillStyle = "#fff"; cxt.beginPath(); cxt.arc(ball.position.x, ball.position.y, ball.r, 0, Math.PI * 2, true); cxt.closePath(); cxt.fill(); if (ball.r + ball.position.x > c.width || ball.position.x < ball.r) ball.vx *= -1; if (ball.r + ball.position.y > c.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));

11-30 5149

12-09 5012
07-22 745
12-27 514
02-23 421
02-19 7856
05-31 939
04-01 532
10-17 169
04-22 9906
07-07 2万+
12-28 777
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客