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时的另外一环状图案