HTML5 Canvas实战
5.4 创建振荡运动
阅读(

路径和文本

图形及组合

处理图像和视频

画布变换

动画给画布带来生机

创建Animation类

创建直线运动

创建加速度

创建振荡运动

本节,我们将探讨第三大类型的运动——振荡运动。弹簧上悬挂的重物,振荡的气泡,来回摆动的摆钟,都是振荡运动的例子。

创建振荡运动
图5-4 创建振荡运动

操作步骤

按照以下步骤,让盒子来回摆动:

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 box  =  {
  x:  250,
  y: canvas.height  /  2  -  25, 
  width:  100,
  height:  50
  };

4. 定义简谐振动方程所需要的参数:

  var centerX  = canvas.width  /  2  - box.width  /  2;
  var amplitude  =  150;  // pixels
  var period  =  2000;  // ms

5. 设置stage()函数,该函数根据简谐振动方程来更新盒子的位置,清除画布,再绘制盒子:

  anim.setStage(function(){ //更新
  box.x  = amplitude  * Math.sin(anim.getTime()  *  2  * Math.PI / period)  + centerX;
  //清除
  this.clear();
  //绘制
  context.beginPath();
  context.rect(box.x, box.y, box.width, box.height); 
  context.fillStyle  = "blue";
  context.fill();
  });

6. 启动动画:

  anim.start();
  };
</script>
</head>

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

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

工作原理

页面加载完成后,我们可以实例化一个Animation对象,并获取画布及上下文对象。

其次,我们可以创建一个box对象,该对象定义了盒子的位置和尺寸,然后定义简谐振动方程所需要的变量:

x(t) = A * sin (t * 2π / T + Φ) + x0

本节的例子中,我们把振幅A设置为150,周期T设置为2秒,偏移x0和相位差Φ设置为和0。

对每一个动画帧,我们利用简谐振动方程来更新盒子的位置,清除画布,再使用rect()方法绘制盒子。

最后,我们可以调用start()方法来启动动画。

相关参考

  • 第2章 绘制矩形

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

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

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验