JavaScript圖形實例：黃金螺旋線

時間 2020-06-29

標籤 javascript 圖形實例黃金螺旋線欄目 JavaScript 简体版

原文原文鏈接

黃金螺旋線是根據斐波那契數列畫出來的螺旋曲線。天然界中存在許多黃金螺旋線的圖案，是天然界最完美的經典黃金比例。例如，如圖1所示的海螺身上的曲線，圖2所示的漩渦，圖3所示的人耳。javascript

圖1 海螺html

圖2 漩渦java

圖3 人耳canvas

又如，名畫蒙娜麗莎的微笑整個畫面所呈現的數學美，如圖4所示。瀏覽器

圖4 蒙娜麗莎的微笑spa

黃金螺旋線的繪製思想是：以斐波那契數爲邊長的正方形拼成長方形，而後在正方形裏面畫一個90度的弧線，鏈接起來的弧線就是黃金螺旋線。3d

例如，先繪製一個邊長爲8的正方形，再在邊長爲8的正方形左側貼着其底邊的左沿線做出一個邊長爲5的正方形，如圖5；接着按照圖5的樣子分別做出邊長爲3和邊長爲2的正方形，最後做出兩個邊長爲1的正方形。這6個正方形構成一個長爲1三、寬爲8的長方形。 htm

圖5 6個正方形構成一個長爲1三、寬爲8的長方形blog

在每一個正方形內畫出圓弧，順次鏈接起來做出一條如圖6所示的黃金螺旋線。 ip

圖6 做出的黃金螺旋線

爲在Canvas畫布中做出如圖6所示的黃金螺旋線，編寫以下的HTML代碼。

<!DOCTYPE html>

<head>

<title>黃金螺旋線</title>

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>

</html>

將上述HTML代碼保存到一個html文本文件中，再在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在瀏覽器窗口中繪製出一條黃金螺旋線，如圖7所示。

圖7 黃金螺旋線

爲在Canvas畫布中做出如圖4所示的黃金螺旋線，編寫以下的HTML代碼。

<!DOCTYPE html>

<head>

<title>黃金螺旋線</title>

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>

</html>

將上述HTML代碼保存到一個html文本文件中，再在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在瀏覽器窗口中繪製出一條黃金螺旋線，如圖8所示。

圖8 人耳黃金螺旋線

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。