JavaScript圖形實例：模仿海龜做圖

時間 2020-07-07

原文原文鏈接

海龜做圖最初源自20世紀60年代的Logo編程語言。在海龜做圖中，咱們能夠編寫指令讓一個虛擬的海龜在屏幕上來回移動。這個海龜帶着一隻鋼筆，咱們可讓海龜不管移動到哪都使用這隻鋼筆來繪製線條。經過編寫代碼，以各類很酷的模式移動海龜，咱們能夠繪製出使人驚奇的圖片。javascript

例如，讓海龜從某個點開始，向前走100（畫出第一條直線），右轉90°後，再向前走100（畫出第2條直線，它與第1條直線垂直），以後再右轉90°，向前走100（畫出第3條直線，它與第1條直線平行，與第2條直線垂直），最後右轉90°，向前走100（畫出第4條直線）。這4條直線正好構成一個邊長爲100的正方形。html

使用海龜做圖，咱們不只可以只用幾行代碼就建立出使人印象深入的圖形效果，並且還能夠跟隨海龜看看每行代碼如何影響到它的移動。這可以幫助咱們理解代碼的邏輯。因此海龜做圖常被用做初學者學習程序設計的一種方式。例如，少兒學習編程就常將海龜做圖做爲啓蒙。java

1. 正N邊形

從座標原點開始（moveTo（0,0）），進行N次循環操做，循環中執行以下操做：編程

向Y軸正方形前進len，lineTo(0,len)；canvas

座標原點移到（0,len）處；瀏覽器

旋轉(360/n)°；編程語言

循環執行完後，用stroke（）方法繪製出N邊形。學習

編寫以下的HTML文件。spa

<!DOCTYPE html>設計

<head>

function draw(id)

{

var canvas=document.getElementById(id);

if (canvas==null)

return false;

var context=canvas.getContext('2d');

context.fillStyle="#EEEEFF";

context.fillRect(0,0,400,400);

context.translate(100, 100);

context.strokeStyle ='red';

context.lineWidth = 2;

var n=5;

var angle=360/n;

context.beginPath();

context.moveTo(0, 0);

for (i =1; i <=n; i++)

{

context.lineTo(0, 400/n);

context.translate(0, 400/n);

context.rotate(-angle* (2 * Math.PI / 360));

}

context.stroke();

}

</script>

</head>

</canvas>

</body>

</html>

在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在畫布中繪製出如圖1所示的正五邊形圖案。

圖1 正五邊形

上面程序中每次旋轉角度爲360/n，所以繪製的圖形爲正N邊形。若旋轉角度多加5°，即修改語句「var angle=360/n;」爲「var angle=360/n+5;」，則在畫布中繪製出如圖2所示的圖形，這個圖形的起點與終點明顯不是同一個點。若再多繪製幾條線，將循環語句「for (i =1; i <=n; i++)」改成「for (i =1; i <=20; i++)」，則在畫布中繪製出如圖3所示的圖形。

圖2 旋轉角度多加5°的圖形

圖3 旋轉角度多加5°，邊數爲20的圖形

將上面程序段中加黑的11行代碼替換爲以下的語句，其他部分不變，則在畫布中繪製出如圖4所示的圖形。

var n=3;

var angle=360/n+5;

context.beginPath();

context.moveTo(0, 0);

for (i =1; i <=72; i++)

{

context.lineTo(0, 200);

context.translate(0, 200);

context.rotate(-angle* (2 * Math.PI / 360));

}

context.stroke();

圖4 經過旋轉125°繪製72條邊獲得的圖案

後面咱們給出代碼時，如未給出完整的HTML文件內容，只給出核心的繪製程序，就意味着只需替換繪製圖1的HTML文件中帶有段落底紋的語句，其他部分保持不變。

若是每次繪製的線段長度遞增，會如何呢？修改核心代碼以下，則在畫布中繪製出如圖5所示的正方形螺旋線。

var n=4;

var angle=360/n;

context.beginPath();

context.moveTo(0, 0);

for (i =100; i <=200; i+=4)

{

context.lineTo(0, i);

context.translate(0, i);

context.rotate(-angle* (2 * Math.PI / 360));

}

context.stroke();

圖5 正方形螺旋線

若是每次繪製的線段長度遞增，且旋轉角度爲100°，又會如何呢？修改核心代碼以下，則在畫布中繪製出如圖6所示的圖形。

var n=4;

var angle=360/n+10;

context.beginPath();

context.moveTo(0, 0);

for (i =100; i <=200; i++)

{

context.lineTo(0, i);

context.translate(0, i);

context.rotate(-angle* (2 * Math.PI / 360));

}

context.stroke();

圖6 N爲4，旋轉角度爲100°且邊長遞增的圖形

若採用多種顏色，例如紅橙黃綠顏4種色輪流繪製線段。修改核心代碼以下，則在畫布中繪製出如圖7所示的圖形。

var colors = ['red','orange','yellow', 'green', 'cyan','blue', 'purple' ];

var n=4;

var angle=360/n+10;

for (i =100; i <=200; i++)

{

context.strokeStyle = colors[i % 4];

context.beginPath();

context.moveTo(0, 0);

context.lineTo(0, i);

context.translate(0, i);

context.rotate(-angle* (2 * Math.PI / 360));

context.stroke();

}

圖7 採用四種顏色繪製的圖案

修改核心代碼以下，則在畫布中繪製出如圖8所示的圖形。

var n=6;

var angle=360/n+1;

for (i =0; i <180; i++)

{

context.beginPath();

context.moveTo(0, 0);

context.lineTo(0,i/3);

context.translate(0, i/3);

context.rotate(-angle* (2 * Math.PI / 360));

context.stroke();

context.rotate(Math.PI /2);

}

圖8 線球

2．五角星

咱們經過控制「海龜」的旋轉角度，能夠繪製出不一樣的圖形，例如五角星等圖形。修改核心代碼以下。

context.beginPath();

context.moveTo(0, 0);

for (i =1; i <=5; i++)

{

context.lineTo(150,0);

context.translate(150, 0);

context.rotate(144* (2 * Math.PI / 360));

}

context.stroke();

在瀏覽器中打開修改後的html文件，能夠在畫布中繪製出如圖9所示的五角星。

圖9 五角星圖案

修改核心代碼以下，則在畫布中繪製出如圖10所示的圖形。

context.beginPath();

context.moveTo(0, 0);

for (i =1; i <=36; i++)

{

context.lineTo(0,180);

context.translate(0, 180);

context.rotate(175* (2 * Math.PI / 360));

}

context.stroke();

圖10 每次旋轉175°繪製的圖形

先修改座標原點的位置爲「context.translate(200, 50);」，以使繪製的圖形不超出畫布範圍。再修改核心代碼以下，則在畫布中繪製出如圖11所示的圖形。

context.beginPath();

context.moveTo(0, 0);

for (i =1; i <=18; i++)

{

context.lineTo(0,150);

context.translate(0, 150);

if (i%2==0)

context.rotate(175* (2 * Math.PI / 360));

else

context.rotate(225* (2 * Math.PI / 360));

}

context.stroke();

圖11 放射狀尖刺圖案

3．多角星

咱們用圖1的程序能夠繪製正N邊形，若用正N邊形的每一個邊長做爲一個等邊三角形的一邊向外繪製一個等邊三角形，這N個等邊三角形造成了N個突出的角，可繪製出一個多角星圖案。

編寫的HTML文件內容以下。

<!DOCTYPE html>

<head>

function draw(id)

{

var canvas=document.getElementById(id);

if (canvas==null)

return false;

var context=canvas.getContext('2d');

context.fillStyle="#EEEEFF";

context.fillRect(0,0,400,400);

context.translate(300, 200);

context.strokeStyle ='red';

context.lineWidth = 2;

var colors = ['red','orange','yellow', 'green', 'cyan','blue', 'purple' ];

var L=50; // 邊長

var n=12; // 角的個數

var angle=180-360/n;

context.moveTo(0, 0);

for (i =1; i <=n; i++)

{

context.rotate(angle* (2 * Math.PI / 360));

context.translate(0, L);

context.beginPath();

context.moveTo(0, 0);

context.rotate(180* (2 * Math.PI / 360));

for (k=1;k<=3;k++) // 繪製等邊三角形

{

context.lineTo(0, L);

context.translate(0, L);

context.rotate(-120* (2 * Math.PI / 360));

}

context.closePath();

context.stroke();

context.fillStyle=colors[i%7];

context.fill();

}

</script>

</head>

</canvas>

</body>

</html>

在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在畫布中繪製出如圖12所示的多角星圖案1。

圖12 多角星圖案1

上面程序中語句「context.rotate(-120* (2 * Math.PI / 360));」修改成「context.rotate(120* (2 * Math.PI / 360));」，則在畫布中繪製出如圖13所示的多角星圖案2。

圖13 多角星圖案2

相關標籤/搜索

每日一句

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