HTML5 Canvas实战
5.5 摆动的气泡
阅读(

路径和文本

图形及组合

处理图像和视频

画布变换

动画给画布带来生机

创建Animation类

创建直线运动

创建加速度

创建振荡运动

摆动的气泡

本节,我们将使用简谐振荡和画布变形的原理创建一个栩栩如生的振荡气泡。

创建振荡的气泡
图5-5 创建振荡的气泡

操作步骤

按照以下步骤,创建一个栩栩如生的振荡气泡,该气泡在空中飘荡:

1. 链接到Animation类:

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

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

 <script>
window.onload  = function(){
  // instantiate new animation object
  var anim  = new Animation("myCanvas");
  var context = anim.getContext();
  var canvas  = anim.getCanvas();

3. 设置stage()函数,该函数更新气泡宽度及高度的缩放比例,清除画布,缩放画布上下文,然后绘制气泡:

anim.setStage(function(){
  // update
  var widthScale  = Math.sin(this.getTime()  /  200)  *  0.1  +  0.9;
  var heightScale  =  -1  * Math.sin(this.getTime()  /  200)  *  0.1  +  0.9;
  // clear
  this.clear();
  //draw
  context.beginPath(); 
  context.save();
  context.translate(canvas.width  /  2, canvas.height /  2);
  context.scale(widthScale, heightScale);
  context.arc(0,  0,  65,  0,  2  * Math.PI, false);   
  context.restore();  
  context.fillStyle  = "#8ED6FF"; context.fill();
  context.lineWidth  =  2;
  context.strokeStyle  = "#555"; context.stroke();
  context.beginPath(); 
  context.save();  
  context.translate(canvas.width  /  2, canvas.height /  2);
  context.scale(widthScale, heightScale);
  context.arc(-30,  -30,  15,  0,  2  * Math.PI, false); 
  context.restore();
  context.fillStyle  = "white"; context.fill();
  });

4. 启动动画:

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

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

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

工作原理

在讨论振荡气泡之前,首先探讨一下如何利用画布变形来在x轴和y轴缩放气泡,是一个不错的主意。要绘制水平方向被拉伸的气泡,我们可以把上下文平移的到画布的中央,在水平方向上放大上下文,再绘制气泡。要绘制垂直方向被拉伸的气泡,我们可以把画布上下文平移的到画布的中央,在垂直方向上放大上下文,再绘制气泡。

为了让气泡振荡,我们需要使气泡被缩放的方向交替变化,用这种方式,水平方向的缩放比例和垂直方向的缩放比例始终不变,如本例中为1.8,其结果是气泡的体积保持不变。一旦这个关系确定,我们就可以使用简谐振荡方程式在x方向和y方向振荡气泡了。

页面首次加载时,我们可以实例化一个Animation对象,并得到动画及上下文对象。其次,我们设置stage()函数,该函数负责更新气泡,清除画布,缩放画布上下文,然后在每一帧绘制气泡。要在每一帧更新气泡,我们可以使用简谐振荡方程式计算水平和垂直方向上的缩放比例。再次,清除画布,再使用arc()方法绘制气泡。

最后,stage()函数被设置完成后,我们便可以调用start()方法启动动画了。

相关参考

  • 第2章 绘制圆
  • 第4章 缩放画布上下文
  • 第4章 把圆变换为椭圆

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

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

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验