JavaScript图形实例：平面镶嵌图案

      用形状、大小完全相同的一种或几种平面图形进行拼接，彼此之间不留空隙、不重叠地铺成一片，就叫做这几种图形的平面镶嵌。

1．用一种多边形实现的平面镶嵌图案

      我们可以采用正三角形、正方形或正六边形实现平面镶嵌。

（1）用正方形平铺。

用正方形进行平面镶嵌比较简单，编写如下的HTML代码。

      在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出如图1所示的正方形平面镶嵌图案。

图1 正方形平面镶嵌图案（一）

      将上述程序中的语句： x0=0; 改写为：

      if (k%2==0) x0=0;

      else x0=-L/2;

      并将填充颜色改为单色填充，例如，ctx.fillStyle = "green";，则绘制出如图2所示的正方形平面镶嵌图案。

图2  正方形平面镶嵌图案（二）

（2）用正三角形平铺。

用正三角形进行平面镶嵌，编写如下的HTML代码。

      在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出如图3所示的正三角形平面镶嵌图案。

 

图3  正三角形平面镶嵌图案

（3）用正六边形平铺。

用正六边形进行平面镶嵌，编写如下的HTML代码。

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

图4  正六边形平面镶嵌图案

2．用几种多边形实现的平面镶嵌图案

      还可以用一种以上的多边形来实现的平面镶嵌。

       （1）正三角形和正方形组合平面镶嵌。

       可以使用正三角形与正方形，通过组合后重复排列的方式完成镶嵌。编写如下的HTML代码。

       在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出如图5所示的正三角形和正方形组合平面镶嵌图案。

 

图5  正三角形和正方形组合平面镶嵌图案

       （2）正六边形与正三角形组合平面镶嵌。

      可以使用正六边形与正三角形，通过组合后重复排列的方式完成镶嵌。编写如下的HTML代码。

      在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出如图6所示的正六边形与正三角形组合平面镶嵌图案。

图6  正六边形与正三角形组合平面镶嵌图案

      （3）正八边形组合正方形平面镶嵌。

      可以使用正八边形与正方形，通过组合后重复排列的方式完成镶嵌。编写如下的HTML代码。

      在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出如图7所示的正八边形组合正方形平面镶嵌图案。

 

图7  正八边形组合正方形平面镶嵌图案