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

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

1．小星星

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

    N=5

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

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

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

編寫以下的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  未封閉的小星星圖案線

2．環帶

     由圖5知，θ值取0~2π時，正好繪製一圈，因爲n取非整數時，曲線不封閉，所以，若取θ值爲0~10π，繪製5圈，可獲得一個環帶圖案。爲讀者引用和下面講述方便，給出完整HTML文件內容以下。

      在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在畫布中繪製的五角環帶，如圖6所示。

 

圖6  五角環帶

      將上面程序中的n值由「n=5.05」修改成「n=9.05」，則在畫布中繪製出如圖7所示的環帶。

 

圖7  九角環帶

      若將上面程序中的n值修改成9.2，且將k值修改成12，則在畫布中繪製出如圖8所示的圓環帶。

 

圖8  n值爲9.2時的圓環

      若將上面程序中的n值修改成5.5，且將k值修改成12，則在畫布中繪製出如圖9所示的圓環。

 

圖9  n值爲5.5時的圓環

      在繪製圖9的程序中，再將語句「var r=110*(1+Math.cos(n*theta)/5);」修改成

      「var r=90*(1+Math.cos(n*theta)/2);」則在畫布中繪製出如圖10所示的圖案。

 

圖10  n值爲5.5時的另外一環狀圖案