JavaScript图形实例：星形条纹图案

1．星形条纹图案

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

x=r*cos(θ)^3

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

圆的笛卡尔坐标方程式为：

x=r*cos(θ)

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

在星形线中绘制一个内接圆，再在内接圆中绘制一个内接星形线。编写如下的HTML代码。

      将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在画布中绘制出的星形线中的圆内星形线图案，如图1所示。

图1  星形线中的圆内星形线

      图1中的图形由大小两个星形线和一个圆等三个部分构成，在这三个部分的图案上每个部分各取200个点，即在0~2π区间中从θ=0开始，每隔π/100按曲线方程求得三个点的坐标值(x1,y1) 、(x2,y2)和(x3,y3)，将这三个点用两条线段连起来，会绘制出怎样的图案呢？

编写的HTML文件内容如下。

      将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在画布中绘制出的星形条纹图案，如图2所示。

 

图2  星形条纹图案

2．椭圆条纹图案

仿照上面的思路，绘制椭圆式条纹图案。编写如下的HTML代码。

      将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在画布中绘制出的椭圆条纹图案1，如图3所示。

 

图3  椭圆条纹图案1

      图3是在椭圆和椭圆式星形上分别取100个点绘制的图案，若取更多的点，比如取300个点，即将语句“for (theta=0;theta<=2*Math.PI;theta+=Math.PI/50)” 改写为   

       for (theta=0;theta<=2*Math.PI;theta+=Math.PI/120)

      则在画布中绘制出如图4所示的椭圆条纹图案2。

 

图4 椭圆条纹图案2