黃金螺旋線是根據斐波那契數列畫出來的螺旋曲線，自然界中存在許多黃金螺旋線的圖案，是自然界最完美的經典黃金比例，例如，如圖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 onl oad="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 onl oad="draw('myCanvas');">
<canvas id="myCanvas" width="200" height="300"></canvas>
</body>
</html>
將上述HTML代碼保存到一個html文本檔案中，再在瀏覽器中打開包含這段HTML代碼的html檔案，可以看到在瀏覽器視窗中繪制出一潭訓金螺旋線，如圖8所示，
圖8 人耳黃金螺旋線
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/53637.html
標籤：JavaScript