HTML5 Canvas实战
5.3 创建加速度
阅读(

路径和文本

图形及组合

处理图像和视频

画布变换

动画给画布带来生机

创建Animation类

创建直线运动

创建加速度

现在,我们已经掌握了动画的基础知识,让我们绘制一个在重力作用下向下加速运动的盒子,来尝试稍微复杂一点的动画。

创建加速运动
图5-3 创建加速运动

操作步骤

按照以下步骤,在画布的顶部绘制一个盒子,该盒子在重力作用下向下加速运动:

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. 定义重力,并创建一个包含位置、x和y速度、及尺寸的box对象:

  var gravity  =  2;  // pixels  / second^2
  var box  =  {
    x: canvas.width  /  2  -  50, y:  0,
    vx:  0, 
    vy:  0,
    width:  100,
    height:  50
  };

4. 设置 stage()函数,该函数更新盒子、清除画布、绘制盒子:

anim.setStage(function(){
  //更新
  if  (this.getTime()  >  1000)  {
  var speedIncrementEachFrame  = gravity  * anim.
  getTimeInterval()  /  1000;  // pixels  / second
  box.vy  += speedIncrementEachFrame;
  box.y  += box.vy  * this.getTimeInterval();
  if  (box.y  > canvas.height  - box.height)  {
       box.y  = canvas.height  - box.height;
    this.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>

工作原理

要创建具有加速度的动画,我们可以增加盒子的速度,用新的速度来更新盒子的位置,清除画布,再绘制盒子。

通过给速度加上由重力产生的速度变化(其值为2像素/秒^2),我们可以计算出每一帧,盒子在y轴方向上的新速度:

var speedIncrementEachFrame = gravity * anim.getTimeInterval() / 1000; // pixels / second

box.vy += speedIncrementEachFrame;

其次,通过增加自上一帧以来移动的距离,可以计算盒子在y轴的新位置:

box.y += box.vy * this.getTimeInterval();

换句话说,y轴位置的变化,等于盒子的速度乘以时间间隔。

最后,我们增加一个条件来检查盒子是否到达画布的底部,如果到达底部,则调用stop()方法停止动画。

在向物体或粒子施力时,加速度就非常有用。施力的例子有重力,空气阻力,阻尼,地面摩擦力和电磁力。对于特别精确的加速动画,还需要很多物理知识,你可能会考虑找一个开源的矢量库,来帮助处理在x方向和y方向上的速度和加速度。

相关参考

  • 第2章 绘制矩形

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

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

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验