JavaScript动画实例：旋转的圆球
1．绕椭圆轨道旋转的圆球
在Canvas画布中绘制一个椭圆，然后在椭圆上绘制一个用绿色填充的实心圆。之后每隔0.1秒刷新，重新绘制椭圆和实心圆，重新绘制时，实心圆的圆心坐标发生变化，但圆心坐标仍然位于椭圆曲线上。这样，可以得到绕椭圆轨道旋转的圆球动画。
编写如下的HTML代码。
<!DOCTYPE html>
<head>
<title>绕椭圆轨道旋转的圆球</title>
<script type="text/javascript">
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>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="300" height="300" style="border:3px double #996633;"></canvas>
</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>
<title>网的绘制</title>
<script type="text/javascript">
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>
<body onload="draw('myCanvas');">
<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>
<title>网的编织（一）</title>
<script type="text/javascript">
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 onload="draw('myCanvas');">
<canvas id="myCanvas" width="400" height="300" style="border:3px double #996633;"></canvas>
</body>
</html>
在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中网的编织动画，如图4所示。
图4 网的编织（一）
我们可以取系统当前时间计算点的坐标，并且圆的填充颜色进行两种颜色的切换，编写HTML文件如下。
<!DOCTYPE html>
<html>
<head>
<title>网的编织（二）</title>
<body>
<canvas id="myCanvas" width="400" height="400" style="border:3px double #996633;"></canvas>
<script type="text/javascript">
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 网的编织（二）
