JavaScript圖形實例：從小星星到環帶

時間 2020-06-28

標籤 javascript 圖形實例從小星星環帶欄目 JavaScript 简体版

原文原文鏈接

1．小星星

設有以下的曲線參數方程：javascript

N=5html

x = r*sin(nθ)*cos(θ)java

y = r*sin(nθ)*sin(θ) （0≤θ≤2π）canvas

用循環依次取θ值爲0~2π（每次增量爲π/64），計算出X和Y,在canvas畫布中將座標點（X,Y）用線連起來，可繪製出一個一個5瓣花卉圖案。瀏覽器

編寫以下的HTML代碼。htm

<!DOCTYPE html>blog

<head>ip

<title>小星星</title>get

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,300);

context.strokeStyle="blue";

context.lineWidth=2;

context.beginPath();

var r=120; // 下面可進行修改的語句（3）

var n=5; // 下面可進行修改的語句（3）

for (theta=0;theta<=2*Math.PI;theta+=Math.PI/64)

{

b=r*Math.sin(n*theta); // 下面可進行修改的語句（3）

x=200+b*Math.cos(theta);

y=150+b*Math.sin(theta);

if (theta==0)

context.moveTo(x,y);

else

context.lineTo(x,y);

}

context.stroke();

}

</script>

</head>

</body>

</html>

將上述HTML代碼保存到一個html文本文件中，再在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在瀏覽器窗口中繪製出如圖1所示的5瓣花卉圖案。

圖1 5瓣花卉圖案1

咱們將上面程序中標識的語句1「var r=120;」修改成「var r=50;」，適當減少初始半徑，使得繪製的圖案不會超出畫布的範圍，在將標識的語句3「b=r*Math.sin(n*theta);」修改成「b=r*(1+Math.sin(n*theta)/2);」，則在畫布中繪製出如圖2所示的5瓣花卉圖案。

圖2 5瓣花卉圖案2

這個圖案比圖1中的圖案的感受是中間向外擴展了，使得中心部位出現空白。再次修改語句3爲「b=r*(2+Math.sin(n*theta)/2);」，以增大中間部分的空白，則在畫布中繪製出如圖3所示的圖案，像小星星嗎？

圖3 小星星圖案

上面程序中的n值也可修改，例如在上面繪製小星星圖案的程序中，將標識語句2

「var n=5;」修改成「var n=6;」，則在畫布中繪製出如圖4所示的圖案。像六角雪花圖案嗎？

圖4 六角雪花圖案

咱們這樣想想，若將n的值修改成一個實數（有小數部分）會這樣呢？例如，將

「var n=5;」修改成「n=5.05;」，則在畫布中繪製出如圖5所示的圖案。

圖5 未封閉的小星星圖案線