JavaScript动画实例：旋转的圆球

1．绕椭圆轨道旋转的圆球

在Canvas画布中绘制一个椭圆，然后在椭圆上绘制一个用绿色填充的实心圆。之后每隔0.1秒刷新，重新绘制椭圆和实心圆，重新绘制时，实心圆的圆心坐标发生变化，但圆心坐标仍然位于椭圆曲线上。这样，可以得到绕椭圆轨道旋转的圆球动画。

编写如下的HTML代码。

<!DOCTYPE html>

<head>

<title>绕椭圆轨道旋转的圆球</title>

var context;

var width,height;

var i;

function draw(id)

{

var canvas = document.getElementById(id);

if (canvas == null)

return false;

context = canvas.getContext('2d');

width=canvas.width;

height=canvas.height;

i=0;

setInterval(move,100);

}

function move()

{

context.clearRect(0,0,width,height);

var dig=Math.PI/24;

context.beginPath();

context.strokeStyle="green";

context.ellipse(150,150,120,60,0,0,Math.PI*2,true);

context.stroke();

context.closePath();

var x=120*Math.sin(i*dig)+150;

var y=60*Math.cos(i*dig)+150;

context.beginPath();

context.arc(x,y,10,0,Math.PI*2,true);

context.fillStyle = "red";

context.fill();

context.closePath();

i=i+1;

if (i>=48) i=0;

}

</script>

</head>

</canvas>

</body>

</html>

将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中呈现出绕椭圆轨道旋转的圆球。

图1 绕椭圆轨道旋转的圆球

2．网的绘制

设立坐标计算公式为：

X=R*SIN(α)

Y=R*COS(α*0.9)

再用循环依次取α值为0~20（每次增量为0.02），计算出X和Y,在canvas画布中将坐标点（X,Y）用线连起来，可绘制出一个曲线图形。

编写HTML文件如下：

<!DOCTYPE html>

<head>

function draw(id)

{

var canvas=document.getElementById(id);

if (canvas==null)

return false;

var context=canvas.getContext('2d');

context.fillStyle="#EEEEFF";

context.fillRect(0,0,400,300);

context.strokeStyle="red";

context.lineWidth=2;

context.beginPath();

var r=150;

for (var i=0;i<1000;i++)

{

var x = Math.sin(i*0.02)*r+200;

var y = Math.cos(i*0.02 * 0.9)*r+150;

if (i==0)

{

context.moveTo(x,y);

}

else

context.lineTo(x,y);

}

context.stroke();

}

</script>

</head>

<canvas id="myCanvas" width="400" height="300">您的浏览器不支持canvas！

</canvas>

</body>

</html>

将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出如图2所示的图形。若修改语句“for (var i=0;i<1000;i++)”为“for (var i=0;i<3600;i++)”，保存后重新在浏览器中打开，可以看到在浏览器窗口中绘制出如图3所示的图形。

图2 连接1000个点绘制的图形

图3 连接3600个点绘制的网

3．网的编织

我们可以将网的绘制过程进行动态展示，编写HTML文件如下。

<!DOCTYPE html>

<head>

var context;

var i;

function draw(id)

{

var canvas = document.getElementById(id);

if (canvas == null)

return false;

context = canvas.getContext('2d');

context.fillStyle="#EEEEFF";

context.fillRect(0,0,400,300);

i=0;

setInterval(go,0.1);

}

function go()

{

context.strokeStyle="red";

context.lineWidth=2;

var x = Math.sin(i*0.02)*150+200;

var y = Math.cos(i*0.02 * 0.9)*150+150;

context.beginPath();

context.arc(x, y, 3, 0, 2 * Math.PI);

context.fillStyle = "red";

context.fill();

i=i+1;

if (i>=3600)

{

i=0;

context.clearRect(0,0,400,300);

}

</script>

</head>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中网的编织动画，如图4所示。

图4 网的编织（一）

我们可以取系统当前时间计算点的坐标，并且圆的填充颜色进行两种颜色的切换，编写HTML文件如下。

<!DOCTYPE html>

<html>

<head>

<body>

var canvas = document.getElementById('myCanvas');

var context = canvas.getContext('2d');

var flag=1;

function animate() {

window.requestAnimationFrame(animate);

draw();

}

function draw() {

var time = new Date().getTime() * 0.002;

var x = Math.sin(time)*180+200;

var y = Math.cos(time * 0.9)*180+200;

flag = !flag;

context.fillStyle = flag ? 'rgb(200,200,10)' : 'rgb(10,10,200)';

context.beginPath();

context.arc(x, y, 10, 0, Math.PI*2, true);

context.closePath();

context.fill();

}

animate();

</script>

</body>

</html>

在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中网的编织另一种动画，如图5所示。

图5 网的编织（二）