JavaScript图形实例：曲线方程

      在HTML5 Canvas画布中，我们可以根据曲线的方程绘制出曲线。例如，在笛卡尔坐标系中，圆的方程为：

x=r*cos(θ)

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

编写如下的HTML代码。

在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中，绘制出一个圆心位于（150,150），半径为100的圆。

若将HTML文件中的圆的方程改写为：

        var x = 100*Math.cos(theta);     // 椭圆方程

        var y = 75*Math.sin(theta);

则在浏览器窗口中绘制出一个椭圆。

下面我们给出采用曲线方程绘制的各类曲线实例。

1．星形线

星形线的笛卡尔坐标方程式为：

x=r*cos(θ)^3

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

编写如下的HTML代码。

在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出星形线，如图1所示。

 

图1  星形线

2．三尖瓣线

三尖瓣线的笛卡尔坐标方程式为：

x=r*[2*cos(θ)+ cos(2θ)]

y=r*[2*sin(θ)+ sin(2θ)]       （0≤θ≤2π）

编写如下的HTML代码。

在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出三尖瓣线，如图2所示。

  

图2  三尖瓣线

3．肾形线

肾形线的笛卡尔坐标方程式为：

x=r*[3*cos(θ)- cos(3θ)]

y=r*[3*sin(θ)- sin(3θ)]       （0≤θ≤2π）

编写如下的HTML代码。

将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出肾形线，如图3所示。

  

图3  肾形线

4．心脏线

心脏线的笛卡尔坐标方程式为：

    r=b*(1+ cos(θ))

x=r*cos(θ)

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

编写如下的HTML代码。

将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出心脏线，如图4所示。

  

图4  心脏线

5．双弧外摆线

双弧外摆线的笛卡尔坐标方程式为：

x= 3*b*cos(θ)+ d*cos(3θ)]

y= 3*b*sin(θ)+ d*sin(3θ)]       （0≤θ≤2π）

编写如下的HTML代码。

将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出双弧外摆线，如图5所示。

  

图5  双弧外摆线

6．梅花曲线

梅花曲线的笛卡尔坐标方程式为：

    r=10+(3*sin(θ*2.5))^2 

x=r*cos(θ)

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

编写如下的HTML代码。

将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出梅花曲线，如图6所示。

  

图6  梅花曲线

7．向日葵线

向日葵线的笛卡尔坐标方程式为：

    b=30

    r=b+b/3*sin(θ*b)  

x=r*cos(θ)

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

编写如下的HTML代码。

将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出向日葵线，如图7所示。

 

图7  向日葵线

8．小蜜蜂形线

小蜜蜂形线的笛卡尔坐标方程式为：

x=r*[cos(θ)+ cos(3θ)]

y=r*[sin(θ)+ sin(5θ)]       （0≤θ≤2π）

编写如下的HTML代码。

将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出小蜜蜂形线，如图8所示。

  

图8 小蜜蜂形线

9．弯月

弯月的笛卡尔坐标方程式为：

x=r*[cos(θ)+ cos(2θ)]

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

编写如下的HTML代码。

将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出弯月，如图9所示。

  

图9  弯月

10．内五角星线

内五角星线的笛卡尔坐标方程式为：

    b=10;

    x = b*(2+5* cos(θ)+6* cos((10/6-1)* θ));

    y = b*(2+5* sin(θ)-6* sin((10/6-1)* θ));    （0≤θ≤14π）

编写如下的HTML代码。

将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出内五角星线，如图10所示。

 

图10  内五角星线

11．热带鱼形线

热带鱼形线的笛卡尔坐标方程式为：

    x =( r* cos(3θ)^4)* θ;

    y = ( r* sin(3θ)^4)* θ;    （0≤θ≤2π）

编写如下的HTML代码。

将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出热带鱼形线，如图11所示。

  

图11  热带鱼形线

12．蜗轨线

蜗轨线的笛卡尔坐标方程式为：

    r=cos(30*θ) *θ/2+2*θ 

x=r*cos(θ)

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

编写如下的HTML代码。

将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出蜗轨线，如图12所示。

  

图12  蜗轨线

13．蝴蝶曲线

蝴蝶曲线的笛卡尔坐标方程式为：

    r=(cos(2*θ) *θ/2+1) *θ 

x=r*cos(θ)

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

编写如下的HTML代码。

将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出蝴蝶曲线，如图13所示。

  

图13  蝴蝶曲线

14．长短幅圆内旋轮线

长短幅圆内旋轮线的笛卡尔坐标方程式为：

    x =(a-b)* cos(θ)+c* cos((a/b-1)*θ);

    y =(a-b)* sin(θ) - c* sin((a/b-1)*θ);    （0≤θ≤20π）

编写如下的HTML代码。

将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出长短幅圆内旋轮线，如图14所示。

  

图14  长短幅圆内旋轮线

15．长短幅圆外旋轮线

长短幅圆外旋轮线的笛卡尔坐标方程式为：

    x =(a+b)* cos(θ)+c* cos((a/b+1)*θ);

    y =(a+b)* sin(θ) - c* sin((a/b+1)*θ);    （0≤θ≤10π）

编写如下的HTML代码。

将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出长短幅圆外旋轮线，如图15所示。

  

图15  长短幅圆外旋轮线