JavaScript圖形實例：窗花圖案

   JavaScript圖形實例：窗花圖案    

1．窗花基本框線

設定曲線的座標方程爲：

    n=25;

    r=100;

    x=r/n*cos(5*θ)+r*cos(θ);

    y=r/n*sin(5*θ)+r*sin(θ);          （0≤θ≤2π）

編寫以下的HTML代碼。

      將上述HTML代碼保存到一個html文本文件中，再在瀏覽器中打開包含這段HTML代碼的html文件，能夠看到在畫布中繪製出如圖1所示的一條閉合曲線。

圖1  n=25，r=100時的閉合曲線

      上述代碼中，參數n和r能夠根據須要進行設置，r的含義至關於閉合曲線的半徑（實際的閉合曲線半徑會比r大一些），r/n的比值給定閉合曲線的平滑度，r/n越大，閉合曲線的旋結越大。例如，n=5，r=100時繪製的閉合曲線如圖2所示。n=2，r=100時繪製的閉合曲線如圖3所示。

           

圖2  n=5，r=100時的閉合曲線  

             

圖3  n=2，r=100時的閉合曲線

2．簡單的窗花圖案

咱們採用圖1所示的閉合曲線做爲外框線，圖3所示的閉合曲線做爲內部圖案線（r值須要適當減少，使得繪製的曲線不會超出外框線），能夠繪製出簡單的窗花圖案。編寫的HTML文件內容以下。

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

圖4  簡單的窗花圖案

3．精美的窗花圖案

      在上面程序的基礎上，咱們編寫以下的HTML文件，能夠繪製出更精美的窗花圖案。

     

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

 

圖5  精美的窗花圖案