JavaScript图形实例：正多边形

        圆心位于坐标原点，半径为R的圆的参数方程为

              X=R*COS(θ)

             Y=R*SIN(θ)

        在圆上取N个等分点，将这N个点首尾连接N条边，可以得到一个正N边形。

1．正多边形阵列

       构造一个8行8列的正N（N为3~10）边形阵列。编写如下的HTML代码。

您的浏览器不支持canvas！

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

 

图1  正3~10边形阵列

2．边长相等的正多边形

        图1中的正N边形通过在圆周上取N等分点得到的，它们的外接圆的半径均相等，但各自的边长并不相等。若要绘制出边长相等的正N边形，可以编写如下的HTML文件。

您的浏览器不支持canvas！

        将上述HTML代码保存到一个html文本文件中，再在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出边长相等的正多边形（从正三角形到正十边形），如图2所示。

 

图2  边长相等的正多边形

3．漂亮的圆盘

        在圆周上取N等分点，将这N个等分点两两用线段相连，共连N*(N-1)/2条边，可以绘制出圆盘图案。编写的HTML代码如下。

您的浏览器不支持canvas！

        在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出漂亮的圆盘图案，如图3所示。

 

图3  圆盘图案

4．顶点在圆周上的连续线段

        前面例子中，圆周上取点的参数方程的夹角θ都在0~2π之间，若将θ乘以一个参数k，可绘制出一些有趣的图形。编写的HTML文件内容如下。

您的浏览器不支持canvas！

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

 

图4  顶点在圆周上的连续线段

        仿图4图形绘制的方法，我们不绘制直线，而是绘制贝塞尔曲线。编写如下的HTML文件。

您的浏览器不支持canvas！

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

 

图5   终点分布在圆周上的贝塞尔曲线