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 长短幅圆外旋轮线