1．一个沿圆周运动的圆圈

一个半径为size的圆圈以画布的中心(canvas.width/2,canvas.height/2)为起点，沿着一个圆周运动。编写如下的HTML代码。

沿圆周运动的圆圈

varcanvas=document.createElement('canvas');varctx=canvas.getContext('2d');

document.body.appendChild(canvas);

canvas.width=window.innerWidth;

canvas.height=window.innerHeight;

ctx.beginPath();

ctx.fillStyle= 'rgba(0, 0, 0, 1)';

ctx.fillRect(0,0, canvas.width, canvas.height);varangle=360;varpos=[canvas.width/2,canvas.height/2];varsize= 10;varspeed= 1;varcurve= 0.5;varcolor= 'rgba(69,204,255,.95)';functiondraw ()

{varradians=angle*Math.PI/180;

pos[0]+=Math.cos(radians)*speed;

pos[1]+=Math.sin(radians)*speed;

angle+=curve;

ctx.strokeStyle=color;

ctx.beginPath();

ctx.arc(pos[0],pos[1],size,0,2*Math.PI);

ctx.stroke();

window.requestAnimationFrame(draw);

}

window.requestAnimationFrame(draw);

View Code

在浏览器中打开包含这段HTML代码的html文件，可以在浏览器窗口中呈现出如图1所示的动画效果。

图1  沿圆周运动的一个圆圈

由图1可知，圆圈运动的起点(canvas.width/2,canvas.height/2)位于运动所沿的圆周上angle==360°的位置。

2．两个沿圆周运动的圆圈

在画布中放置两个圆圈，两个圆圈的起点均位于画布中心(canvas.width/2,canvas.height/2)，一个圆圈从所沿圆周的45°处沿圆周运动，另一个圆圈从所沿圆周的135°处沿圆周运动。编写如下的HTML代码。

沿圆周运动的圆圈

varcanvas=document.createElement('canvas');varctx=canvas.getContext('2d');

document.body.appendChild(canvas);

canvas.width=window.innerWidth;

canvas.height=window.innerHeight;

ctx.beginPath();

ctx.fillStyle= 'rgba(0, 0, 0, 1)';

ctx.fillRect(0,0, canvas.width, canvas.height);varangle1=45;varangle2=135;varpos1=[canvas.width/2,canvas.height/2];varpos2=[canvas.width/2,canvas.height/2];varsize= 10;varspeed= 1;varcurve= 0.5;varcolor1= 'rgba(69,204,255,.95)';varcolor2= 'rgba(255,212,50,.95)';functiondraw ()

{varradians=angle1*Math.PI/180;

pos1[0]+=Math.cos(radians)*speed;

pos1[1]+=Math.sin(radians)*speed;

angle1+=curve;

radians=angle2*Math.PI/180;

pos2[0]+=Math.cos(radians)*speed;

pos2[1]+=Math.sin(radians)*speed;

angle2+=curve;

ctx.strokeStyle=color1;

ctx.beginPath();

ctx.arc(pos1[0],pos1[1],size,0,2*Math.PI);

ctx.stroke();

ctx.strokeStyle=color2;

ctx.beginPath();

ctx.arc(pos2[0],pos2[1],size,0,2*Math.PI);

ctx.stroke();//fade();

window.requestAnimationFrame(draw);

}functionfade ()

{

ctx.beginPath();

ctx.fillStyle= 'rgba(0, 0, 0, .03)';

ctx.fillRect(0,0, canvas.width, canvas.height);

}

window.requestAnimationFrame(draw);

View Code

在浏览器中打开包含这段HTML代码的html文件，可以在浏览器窗口中呈现出如图2所示的动画效果。

图2  两个沿圆周运动的圆圈

为了展示圆圈运动的轨迹，我们在函数draw()的函数体中，最后一行语句前加上调用语句“fade();”，编写fade()函数如下：

function fade ()

{

ctx.beginPath();

ctx.fillStyle = 'rgba(0, 0, 0, .03)';

ctx.fillRect(0, 0, canvas.width, canvas.height);

}

这样，圆圈运动轨迹带长尾效果。在浏览器中呈现出如图3所示的动画效果。

图3  两个沿圆周运动的圆圈(带长尾效果)

3．更多沿圆周运动的圆圈

如果要在画布中让num个圆圈沿圆周运动呢？为此，将圆圈抽象为粒子对象Particle，该对象有圆圈在所沿圆周上的起始位置angle、圆圈运动的当前位置pos(初始值为画布中心[canvas.width/2,canvas.height/2])、圆圈大小size、运动速度speed、运动角度变化量curve和圆圈颜色color等属性；为该对象定义move和draw两个方法，分别完成圆圈的位置变化和圆圈绘制操作。

为设定方便起见，给沿圆周运动的圆圈预设置4个参数，用变量config来表示。config.num、config.size 、config.speed和config.curve分别表示4个参数分量。其中，config.num表示画布中参与运动的圆圈个数，由它计算出圆圈在所沿圆周上的起始位置angle。

编写的HTML文件如下。

沿圆周运动的圆圈(给定4个参数)

varcanvas=document.createElement('canvas');varctx=canvas.getContext('2d');

canvas.width=window.innerWidth;

canvas.height=window.innerHeight;

document.body.appendChild(canvas);

ctx.beginPath();

ctx.fillStyle= 'rgba(0, 0, 0, 1)';

ctx.fillRect(0,0, canvas.width, canvas.height);varparticles=[];varcolors=['rgba(69,204,255,.95)','rgba(73,232,62,.95)','rgba(255,212,50,.95)','rgba(232,75,48,.95)','rgba(178,67,255,.95)'];varconfig={};

config.num= 5;

config.size= 2;

config.speed= 1;

config.curve= 0.5;

createParticles()

window.requestAnimationFrame(draw);functioncreateParticles()

{varn=config.num;for(vari=0; i

{varangle=(360/n)*(i+1);

particles.push(newParticle(angle,colors[i%5]));

}

}functiondraw ()

{for(vari=0; i

{varp=particles[i];

p.move();

p.draw();

}

fade();

window.requestAnimationFrame(draw);

}functionParticle (angle,color)

{this.angle=angle;this.size=config.size;this.speed=config.speed;this.color=color;this.curve=config.curve;this.pos=[canvas.width/2, canvas.height/2];

}

Particle.prototype.move= function()

{this.angle+= this.curve;varradians= this.angle*Math.PI/180;

this.pos[0]+=Math.cos(radians)*this.speed,this.pos[1]+=Math.sin(radians)*this.speed;

}

Particle.prototype.draw= function()

{

ctx.strokeStyle= this.color;

ctx.beginPath();

ctx.arc(this.pos[0],this.pos[1],this.size,0,2*Math.PI);

ctx.stroke();

}functionfade ()

{

ctx.beginPath();

ctx.fillStyle= 'rgba(0, 0, 0, .03)';

ctx.fillRect(0,0, canvas.width, canvas.height);

ctx.fill();

}

View Code

在浏览器中打开包含这段HTML代码的html文件，可以在浏览器窗口中呈现出如图4所示的动画效果。

图4  沿圆周运动的圆圈(num=5，size=2，speed = 1，curve = 0.5)

为4个参数设定不同的值，可以呈现出不同的动画效果。给出3组不同值的设定，呈现的动画效果分别如图5、图6和图7所示。为避免图形文件过大，下列的动画过程均只录制一个片段。完整的动画演示过程请读者自己打开HTML文件运行程序观看。

图5  沿圆周运动的圆圈(num=80，size=4，speed = 1，curve = 0.5)

图6  沿圆周运动的圆圈(num=8，size=16，speed = 1.8，curve = 1.8)

图7  沿圆周运动的圆圈(num=90，size=100，speed = 2，curve =1)

由图4~图7可知，参数speed 和curve决定了圆圈运动的轨迹。上面代码中，各个圆圈的参数speed 和curve均相同。能否让各个运动的圆圈的参数speed 和curve不同，这样它们的运动轨迹也不同，呈现出更多的变化呢？

一个简单的办法是让参数speed 和curve在某个区间范围内随机取值。

例如，修改config参数的设置如下：

config.num = 80;

config.size = 300;

config.speed =[1,10];

config.curve = [-0.5,0.5];

修改function Particle (angle,color)如下：

function Particle (angle,color)

{

this.angle = angle;

this.size  = config.size;

this.speed = rand(config.speed[0],config.speed[1]);

this.color = color;

this.curve = rand(config.curve[0],config.curve[1]);

this.pos = [canvas.width/2, canvas.height/2];

}

增加在区间[min,max]中取随机值的函数如下：

function rand(min, max)

{

return Math.random()*(max-min)+min;

}

其余部分保持不变，则在浏览器窗口中呈现出如图8所示的动画效果。这个动画效果有点炫酷哟！

图8  沿圆周运动的圆圈(num=80，size=300，speed =1~10，curve =-0.5~0.5)

4．可设置参数的沿圆周运动的圆圈

由图4~图8可知，不同的参数设定，沿圆周运动的圆圈所呈现的动画效果不同。为此，我们提供文本框输入预设数值的方式对4个参数的值进行设定，设定完成后，单击“Go!”按钮，按设定的参数进行动画效果的呈现。

编写的HTML代码如下。

沿圆周运动的圆圈(可设置参数)

}form input[type=text]{width:30px;border:1px solid #000;text-align:center;

}form button{margin:4px auto;border:1px solid #000;display:block;

}

Particles

To
Size

To
Speed

To
Curve

To

Clear

Go!

varcanvas=document.createElement('canvas');varctx=canvas.getContext('2d');

canvas.width=window.innerWidth;

canvas.height=window.innerHeight;

document.body.appendChild(canvas);varparticles=[];varcolors=['rgba(69,204,255,.95)','rgba(73,232,62,.95)','rgba(255,212,50,.95)','rgba(232,75,48,.95)','rgba(178,67,255,.95)'];varconfig={};varsettings=document.getElementById('settings');

start();

window.requestAnimationFrame(draw);functioncreateParticles()

{varn=rand(config.num[0],config.num[1]);for(vari=0; i

{varangle=(360/n)*(i+1);

particles.push(newParticle({

angle:angle,

size:rand(config.size[0],config.size[1]),

speed:rand(config.speed[0],config.speed[1]),

color:colors[i%5],

curve:rand(config.curve[0],config.curve[1])

}));

}

}functiondraw ()

{for(vari=0; i

{varp=particles[i];

p.move();

p.draw(ctx);

}

fade();

window.requestAnimationFrame(draw);

}functionParticle (options)

{this.angle=options.angle;this.size=options.size;this.speed=options.speed;this.color=options.color;this.curve=options.curve;this.pos=[canvas.width/2, canvas.height/2];

}

Particle.prototype.move= function()

{this.angle+= this.curve;varradians= this.angle*Math.PI/180;

this.pos[0]+=Math.cos(radians)*this.speed,this.pos[1]+=Math.sin(radians)*this.speed;

}

Particle.prototype.draw= function(ctx)

{

ctx.strokeStyle= this.color;

ctx.beginPath();

ctx.arc(this.pos[0],this.pos[1],this.size,0,2*Math.PI);

ctx.stroke();

}functionfade ()

{

ctx.beginPath();

ctx.fillStyle= 'rgba(0, 0, 0, .03)';

ctx.fillRect(0,0, canvas.width, canvas.height);

ctx.fill();

}functionclear ()

{

ctx.beginPath();

ctx.fillStyle= 'rgba(0, 0, 0, 1)';

ctx.fillRect(0,0, canvas.width, canvas.height);

ctx.fill();

particles.length= 0;

}functionstart()

{

config.num=[parseFloat(settings.inBubblesMin.value),

parseFloat(settings.inBubblesMax.value) ];

config.size=[parseFloat(settings.inSizeMin.value),

parseFloat(settings.inSizeMax.value)];

config.speed=[parseFloat(settings.inSpeedMin.value),

parseFloat(settings.inSpeedMax.value)];

config.curve=[parseFloat(settings.inCurveMin.value),

parseFloat(settings.inCurveMax.value)];

createParticles();

}

settings.btnSet.addEventListener("click", start);

settings.btnClear.addEventListener("click", clear);functionrand(min, max)

{returnMath.random()*(max-min)+min;

}

View Code

在浏览器中打开包含这段HTML代码的html文件，可以在浏览器窗口中呈现出如图9所示的动画效果。

图9  沿圆周运动的圆圈(单击一次Go!按钮)

在页面中，单击“Clear”按钮，会清屏，同时置粒子数组的长度为0，相当于页面中不再有沿圆周运动的圆圈。

单击“Go！”按钮，会读取设置的参数值，同时调用createParticles();向粒子数组中添加运动的圆圈。注意：是添加，若数组中原来有运动的圆圈，则原来运动的圆圈会继续运动。这样，多次单击“Go！”按钮，会呈现出更多有变化的动画效果。

例如，图9的动画效果是150个运动的圆圈构成一个大圆环收缩效果。若按一定时间间隔单击两次“Go！”按钮，应该会呈现出2个大圆环交替收缩的动画效果，如图10所示。

图10  沿圆周运动的圆圈(单击两次Go!按钮)

多次单击“Go！”按钮添加运动圆圈的功能设定很有意思了。这意味着我们可以将上面的动画效果进行组合。图10的动画效果实质是两个图9所示动画效果的组合。

例如，设定num=150，size=2，speed = 1，curve = 0.5后，单击“Go！”按钮，呈现出如图9所示的动画效果；再设定num=8，size=16，speed = 1.8，curve = 1.8，单击“Go！”按钮(呈现如图6所示的动画效果)后，图6和图9的动画效果组合起来，呈现出如图11所示的动画效果。

图11  两种动画效果的组合