黃金螺旋線是根據斐波那契數列畫出來的螺旋曲線。自然界中存在許多黃金螺旋線的圖案，是自然界最完美的經典黃金比例。例如，如圖1所示的海螺身上的曲線，圖2所示的漩渦，圖3所示的人耳。
圖1 海螺
圖2 漩渦
圖3 人耳
又如，名畫蒙娜麗莎的微笑整個畫面所呈現的數學美，如圖4所示。
圖4 蒙娜麗莎的微笑
黃金螺旋線的繪制思想是：以斐波那契數為邊長的正方形拼成長方形，然后在正方形里面畫一個90度的弧線，連接起來的弧線就是黃金螺旋線。
例如，先繪制一個邊長為8的正方形，再在邊長為8的正方形左側貼着其底邊的左沿線作出一個邊長為5的正方形，如圖5；接着按照圖5的樣子分別作出邊長為3和邊長為2的正方形，最后作出兩個邊長為1的正方形。這6個正方形構成一個長為13、寬為8的長方形。
圖5 6個正方形構成一個長為13、寬為8的長方形
在每個正方形內畫出圓弧，順次連接起來作出一條如圖6所示的黃金螺旋線。
圖6 作出的黃金螺旋線
為在Canvas畫布中作出如圖6所示的黃金螺旋線，編寫如下的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="red";
context.fillRect(0,0,400,300);
context.lineWidth=3;
context.translate(80,100);
var r=20
context.beginPath();
context.arc(5*r,2*r,1*r,Math.PI,Math.PI*2,true);
context.arc(4*r,2*r,2*r,0,Math.PI*3/2,true);
context.arc(4*r,3*r,3*r,Math.PI*3/2,Math.PI,true);
context.arc(6*r,3*r,5*r,Math.PI,Math.PI/2,true);
context.arc(6*r,0,8*r,Math.PI/2,Math.PI*2,true);
context.strokeStyle = 'yellow';
context.stroke();
}
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="400" height="300"></canvas>
</body>
</html>
將上述HTML代碼保存到一個html文本文件中，再在瀏覽器中打開包含這段HTML代碼的html文件，可以看到在瀏覽器窗口中繪制出一條黃金螺旋線，如圖7所示。
圖7 黃金螺旋線
為在Canvas畫布中作出如圖4所示的黃金螺旋線，編寫如下的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="red";
context.fillRect(0,0,200,300);
context.lineWidth=3;
context.translate(40,40);
var r=10
context.beginPath();
context.arc(4*r,6*r,1*r,Math.PI,Math.PI*2,false);
context.arc(3*r,6*r,2*r,0,Math.PI/2,false);
context.arc(3*r,5*r,3*r,Math.PI/2,Math.PI,false);
context.arc(5*r,5*r,5*r,Math.PI,Math.PI*3/2,false);
context.arc(5*r,8*r,8*r,Math.PI*3/2,Math.PI*2,false);
context.arc(0,8*r,13*r,0,Math.PI/2,false);
context.strokeStyle = 'yellow';
context.stroke();
}
</script>
</head>
<body onload="draw('myCanvas');">
<canvas id="myCanvas" width="200" height="300"></canvas>
</body>
</html>
將上述HTML代碼保存到一個html文本文件中，再在瀏覽器中打開包含這段HTML代碼的html文件，可以看到在瀏覽器窗口中繪制出一條黃金螺旋線，如圖8所示。
圖8 人耳黃金螺旋線