在“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 七彩花瓣