HTML5 Canvas实战
5.2 创建直线运动
阅读(

路径和文本

图形及组合

处理图像和视频

画布变换

动画给画布带来生机

创建Animation类

创建直线运动

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

创建直线运动
图5-2 创建直线运动

操作步骤

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

1. 链接到Animation类:

<head>
<script src="animation.js"> </script>

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

<script>
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();
};
</script>
</head>

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

<body>
<canvas id="myCanvas" width="600" height="250" style="border:1px solid black;">
</canvas>
</body>

工作原理

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

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

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

相关参考

  • 第2章 绘制矩形

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验