在“JavaScript图形实例：阿基米德螺线”和“JavaScript图形实例：曲线方程”中，我们学习了利用曲线的方程绘制曲线的方法。如果想看看曲线是怎样绘制出来的，怎么办呢？编写简单的动画，就可以展示指定曲线的绘制过程。

1．李萨如曲线

        设定李萨如曲线的坐标方程为：

              X=SIN(2θ)

              Y=SIN(3θ)     （0≤θ≤2π）

        将0~2π区间等分512段，取θ的初始值π/256，按曲线方程求得坐标值(x,y)，并在当前坐标处通过绘制一个实心圆的方式描点。之后每隔0.02秒，将θ的初始值加π/256后，按曲线方程求得新坐标值(x,y)，并在求得的新坐标处再通过绘制一个实心圆的方式继续描点，这样，可以得到动态绘制的李萨如曲线。曲线绘制完成（即θ的值为2π），将画布清除，令θ重新从初值π/256开始继续动画过程。

编写如下的HTML代码。

        将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中呈现出李萨如曲线的动态绘制过程，如图1所示。

  

图1  李萨如曲线

2．阿基米德螺线

编写HTML文件如下：

        将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中呈现出阿基米德螺线的动态绘制过程，如图2所示。

 

图2  阿基米德螺线

3．螺旋线

设定螺旋线的坐标方程为：

    X=30*COS(θ)+70*COS(θ/4)

    Y=30*SIN(θ) - 70*SIN(θ/4)   （0≤θ≤8π）

将螺旋线的绘制过程进行动态展示，编写HTML文件如下。

        在浏览器中打开包含这段HTML代码的html文件，可以在浏览器窗口中看到螺旋线绘制动画，如图3所示。

 

图3  螺旋线绘制

4．七彩花瓣

设定四叶花瓣线的坐标方程为：

    X=R*COS(2θ)*SIN(θ)

    Y= R*COS(2θ)*COS(θ)   （0≤θ≤2π）

按这个方程，可以绘制如图4所示的四叶花瓣线。

 

图4 四叶花瓣线

        将四叶花瓣线的绘制过程进行动态展示，并且每绘制一个新点，填充颜色在7中颜色间进行切换，这样绘制出七彩花瓣。编写HTML文件如下。

        在浏览器中打开包含这段HTML代码的html文件，可以在浏览器窗口中看到七彩花瓣绘制动画，如图5所示。

 

图5  七彩花瓣