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  精美的窗花图案