JavaScript动画实例：李萨如曲线
在“JavaScript图形实例：阿基米德螺线”和“JavaScript图形实例：曲线方程”中，我们学习了利用曲线的方程绘制曲线的方法。如果想看看曲线是怎样绘制出来的，怎么办呢？编写简单的动画，就可以展示指定曲线的绘制过程。
1．李萨如曲线
设定李萨如曲线的坐标方程为：
X=SIN(2θ)
Y=SIN(3θ) （0≤θ≤2π）
将0~2π区间等分512段，取θ的初始值π/256，按曲线方程求得坐标值(x,y)，并在当前坐标处通过绘制一个实心圆的方式描点。之后每隔0.02秒，将θ的初始值加π/256后，按曲线方程求得新坐标值(x,y)，并在求得的新坐标处再通过绘制一个实心圆的方式继续描点，这样，可以得到动态绘制的李萨如曲线。曲线绘制完成（即θ的值为2π），将画布清除，令θ重新从初值π/256开始继续动画过程。
编写如下的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,300,300);
i=1;
setInterval(go,20);
}
function go()
{
context.strokestyle="red";
context.lineWidth=2;
var dig=Math.PI/256;
x=150+100*Math.sin(2*i*dig);
y=150-100*Math.sin(3*i*dig);
context.beginPath();
context.arc(x, y, 3, 0, 2 * Math.PI);
context.fillStyle = "red";
context.fill();
i=i+1;
if (i>512)
{
i=1;
context.clearRect(0,0,300,300);
}
}
</script>
</head>
<body onload="draw(‘myCanvas‘);">
<canvas id="myCanvas" width="300" height="300" style="border:3px double #996633;">
</canvas>
</body>
</html>
将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中呈现出李萨如曲线的动态绘制过程，如图1所示。
图1 李萨如曲线
2．阿基米德螺线
编写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,300,300);
i=1;
setInterval(go,20);
}
function go()
{
context.strokestyle="red";
context.lineWidth=2;
var dig=Math.PI/128;
x=150+5*i*dig*Math.sin(i*dig);
y=150+5*i*dig*Math.cos(i*dig);
context.beginPath();
context.arc(x, y, 3, 0, 2 * Math.PI);
context.fillStyle = "red";
context.fill();
i=i+1;
if (i>1024)
{
i=1;
context.clearRect(0,0,300,300);
}
}
</script>
</head>
<body onload="draw(‘myCanvas‘);">
<canvas id="myCanvas" width="300" height="300" style="border:3px double #996633;">
</canvas>
</body>
</html>
将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中呈现出阿基米德螺线的动态绘制过程，如图2所示。
图2 阿基米德螺线
3．螺旋线
设定螺旋线的坐标方程为：
X=30*COS(θ)+70*COS(θ/4)
Y=30*SIN(θ) - 70*SIN(θ/4) （0≤θ≤8π）
将螺旋线的绘制过程进行动态展示，编写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,300,300);
i=1;
setInterval(go,20);
}
function go()
{
context.strokestyle="red";
context.lineWidth=2;
var x = 150+30*Math.cos(i*Math.PI/72) +70*Math.cos(i/4*Math.PI/72);
var y = 150+30*Math.sin(i*Math.PI/72) -70*Math.sin(i/4*Math.PI/72);
context.beginPath();
context.arc(x, y, 3, 0, 2 * Math.PI);
context.fillStyle = "red";
context.fill();
i=i+1;
if (i>576)
{
i=1;
context.clearRect(0,0,300,300);
}
}
</script>
</head>
<body onload="draw(‘myCanvas‘);">
<canvas id="myCanvas" width="300" height="300" style="border:3px double #996633;"></canvas>
</body>
</html>
在浏览器中打开包含这段HTML代码的html文件，可以在浏览器窗口中看到螺旋线绘制动画，如图3所示。
图3 螺旋线绘制
4．七彩花瓣
设定四叶花瓣线的坐标方程为：
X=R*COS(2θ)*SIN(θ)
Y= R*COS(2θ)*COS(θ) （0≤θ≤2π）
按这个方程，可以绘制如图4所示的四叶花瓣线。
图4 四叶花瓣线
将四叶花瓣线的绘制过程进行动态展示，并且每绘制一个新点，填充颜色在7中颜色间进行切换，这样绘制出七彩花瓣。编写HTML文件如下。
<!DOCTYPE>
<html>
<head>
<title>七彩花瓣</title>
</head>
<body >
<canvas id="myCanvas" width="400" height="300" style="border:3px double #996633;">
</canvas>
<script>
var canvas = document.getElementById(‘myCanvas‘);
var context = canvas.getContext(‘2d‘);
var i=0;j=0.05,t=0;
var colors=new Array(‘red‘,‘orange‘,‘yellow‘,‘green‘,‘cyan‘,‘blue‘,‘purple‘);
function timing() {
t=t+1;
i=i+j;
var r=120*Math.cos(2*i);
if(t>6){t=0;}
var x=200+r*Math.sin(i);
var y=150+r*Math.cos(i);
context.beginPath();
context.arc(x,y,5,0,2*Math.PI);
context.fillStyle=colors[t];
context.fill();
if(i>6.3){j=-0.05;context.clearRect(0,0,400,300);}
if(i<0){j=0.05;context.clearRect(0,0,400,300);}
}
window.setInterval(‘timing()‘,200);
</script>
</body>
</html>
在浏览器中打开包含这段HTML代码的html文件，可以在浏览器窗口中看到七彩花瓣绘制动画，如图5所示。
图5 七彩花瓣