多泡html5,5.5 摆动的气泡 - HTML5 Canvas 实战

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

图5-5 创建振荡的气泡

操作步骤

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

1. 链接到Animation类：

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

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();

};

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

工作原理

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

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

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

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

相关参考

第2章 绘制圆

第4章 缩放画布上下文

第4章 把圆变换为椭圆