html5画布直线运动,5.2 创建直线运动 - HTML5 Canvas 实战

本节，我们创建一个简单的直线运动的动画，来考验一下我们的Animation类。动画的内容是，把一个盒子从画布的左侧移动到右侧。

图5-2 创建直线运动

操作步骤

按照以下步骤，把一个盒子从画布的一侧移动到另一侧：

1. 链接到Animation类：

2. 实例化一个Animation对象，并获取画布上下文对象：

window.onload = function(){

var anim  = new Animation("myCanvas");

var canvas  = anim.getCanvas();

var context  = anim.getContext();

3. 定义盒子的直线运动速度，并创建一个包含位置和尺寸的box对象：

var linearSpeed  =  100;  // pixels  / second

var box  =  {

x:  0,

y: canvas.height  /  2  -  25, width:  100,

height:  50

};

4. 设置stage()函数，该函数更新盒子的位置、清除画布、绘制盒子：

anim.setStage(function(){

//更新

var linearDistEachFrame  = linearSpeed  * this.

getTimeInterval()  /  1000;

if  (box.x  < canvas.width  - box.width)  {

box.x  += linearDistEachFrame;

}

else  {

anim.stop();

}

//清除

this.clear();

//绘制

context.beginPath();

context.fillStyle  = "blue";

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

});

5. 启动动画：

anim.start();

};

6. 在HTML文档的body部分嵌入canvas标签：

工作原理

要创建一个简单的直线运动的动画，我们首先需要实例化一个Animation对象，并得到画布及其上下文对象。其次，我们可以定义盒子的速度，本节我们设置为100像素/秒，并创建盒子对象，包含盒子的位置和尺寸。

现在，盒子已经初始化完成，我们可以定义stage()函数，该函数在动画循环中被调用。在每次循环中，首先计算上一帧和当前帧之间的距离，再把这个距离加到x值上，来更新盒子的位置。当盒子到达画布边缘，我们可以调用stop()函数来停止动画。

最后，当stage()函数定义完成，我们就可以调用start()方法启动动画了。

相关参考

第2章 绘制矩形