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

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

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

（1）用正方形平铺。

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

<!DOCTYPE html>

<head>

<title>正方形平面镶嵌图案</title>

</head>

<body>

<canvas id="myCanvas" width="500" height="500" style="border:3px double #996633;">

</canvas>

<script type="text/javascript">

var canvas = document.getElementById('myCanvas');

var ctx = canvas.getContext('2d');

var color=['#00FFFF','#00FF00'];

var L=50;

for (k=0;k<10;k++)

{

y=k*L;

x0=0;

for (i=0;i<10;i++)

{

x=x0+i*L;

ctx.strokeStyle="black";

ctx.strokeRect(x,y,L,L);

ctx.fillStyle = color[(k+i)%2];

ctx.fillRect(x,y,L,L);

}

}

</script>

</body>

</html>

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

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

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

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

else x0=-L/2;

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

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

（2）用正三角形平铺。

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

<!DOCTYPE html>

<head>

<title>正三角形平面镶嵌图案</title>

</head>

<body>

<canvas id="myCanvas" width="500" height="500" style="border:3px double #996633;">

</canvas>

<script type="text/javascript">

var canvas = document.getElementById('myCanvas');

var ctx = canvas.getContext('2d');

var sqrt3=Math.sqrt(3);

var color=['#00FFFF','#00FF00'];

var L=50;

for (k=0;k<13;k++)

{

if (k%2==0)

{

x0=-L;

}

else

{

x0=-L/2;

}

y=k*sqrt3*L/2;

for (i=0;i<15;i++)

{

x=x0+i*L;

ctx.strokeStyle="black";

ctx.beginPath();

ctx.moveTo(x,y);

ctx.lineTo(x+L/2,y-sqrt3/2*L);

ctx.lineTo(x+L,y);

ctx.closePath();

ctx.stroke();

ctx.fillStyle=color[0];

ctx.fill();

ctx.beginPath();

ctx.moveTo(x+L,y);

ctx.lineTo(x+L/2,y-sqrt3/2*L);

ctx.lineTo(x+3*L/2,y-sqrt3/2*L);

ctx.closePath();

ctx.fillStyle = color[1];

ctx.stroke();

ctx.fill();

}

}

</script>

</body>

</html>

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

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

（3）用正六边形平铺。

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

<!DOCTYPE html>

<head>

<title>正六边形平面镶嵌图案</title>

</head>

<body>

<canvas id="myCanvas" width="500" height="500" style="border:3px double #996633;">

</canvas>

<script type="text/javascript">

var canvas = document.getElementById('myCanvas');

var ctx = canvas.getContext('2d');

var sqrt3=Math.sqrt(3);

var color=['#00FFFF','#00FF00','#FFFF00'];

function drawHexagon(x,y,L,c)

{

ctx.beginPath();

ctx.moveTo(x-L/2,y-sqrt3/2*L);

ctx.lineTo(x+L/2,y-sqrt3/2*L);

ctx.lineTo(x+L,y);

ctx.lineTo(x+L/2,y+sqrt3/2*L);

ctx.lineTo(x-L/2,y+sqrt3/2*L);

ctx.lineTo(x-L,y);

ctx.closePath();

ctx.fillStyle = c;

ctx.fill();

ctx.strokeStyle="black";

ctx.stroke();

}

var L=45;

for (k=0;k<14;k++)

{

if (k%2==0)

{

x0=L;

}

else

{

x0=-L/2;

}

y=k*sqrt3*L/2;

for (i=0;i<5;i++)

{

x=x0+i*3*L;

drawHexagon(x,y,L,color[k%3]);

}

}

</script>

</body>

</html>

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

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

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

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

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

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

<!DOCTYPE html>

<head>

<title>正三角形和正方形组合平面镶嵌图案</title>

</head>

<body>

<canvas id="myCanvas" width="500" height="500" style="border:3px double #996633;">

</canvas>

<script type="text/javascript">

var canvas = document.getElementById('myCanvas');

var ctx = canvas.getContext('2d');

var sqrt3=Math.sqrt(3);

var color=['#00FFFF','#00FF00'];

var L=50;

var y=0;

for (k=0;k<13;k++)

{

if (k%2==0)

{

x0=-L;

y=y+sqrt3*L/2;

for (i=0;i<12;i++)

{

x=x0+i*L;

ctx.strokeStyle="black";

ctx.beginPath();

ctx.moveTo(x,y);

ctx.lineTo(x+L/2,y-sqrt3/2*L);

ctx.lineTo(x+L,y);

ctx.closePath();

ctx.stroke();

ctx.fillStyle=color[0];

ctx.fill();

ctx.beginPath();

ctx.moveTo(x+L,y);

ctx.lineTo(x+L/2,y-sqrt3/2*L);

ctx.lineTo(x+3*L/2,y-sqrt3/2*L);

ctx.closePath();

ctx.fillStyle = color[1];

ctx.stroke();

ctx.fill();

}

}

else

{

x0=0;

y=y+L;

for (i=0;i<6;i++)

{

x=x0+2*i*L;

ctx.strokeStyle="black";

ctx.strokeRect(x,y-L,L,L);

ctx.fillStyle=color[0];

ctx.fillRect(x,y-L,L,L);

ctx.strokeRect(x+L,y-L,L,L);

ctx.fillRect(x+L,y-L,L,L);

}

}

}

</script>

</body>

</html>

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

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

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

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

<!DOCTYPE html>

<head>

<title>正六边形与正三角形组合平面镶嵌图案</title>

</head>

<body>

<canvas id="myCanvas" width="500" height="500" style="border:3px double #996633;">

</canvas>

<script type="text/javascript">

var canvas = document.getElementById('myCanvas');

var ctx = canvas.getContext('2d');

var sqrt3=Math.sqrt(3);

var color=['#00FFFF','#00FF00'];

function drawHexagon(x,y,L,c)

{

ctx.beginPath();

ctx.moveTo(x-L/2,y-sqrt3/2*L);

ctx.lineTo(x+L/2,y-sqrt3/2*L);

ctx.lineTo(x+L,y);

ctx.lineTo(x+L/2,y+sqrt3/2*L);

ctx.lineTo(x-L/2,y+sqrt3/2*L);

ctx.lineTo(x-L,y);

ctx.closePath();

ctx.fillStyle = c;

ctx.fill();

ctx.strokeStyle="black";

ctx.stroke();

}

ctx.fillStyle="#FFFF00";

ctx.fillRect(0,0,canvas.width,canvas.height);

var L=45;

for (k=0;k<7;k++)

{

if (k%2==0)

{

x0=L;

}

else

{

x0=0;

}

y=k*sqrt3*L;

for (i=0;i<7;i++)

{

x=x0+i*2*L;

drawHexagon(x,y,L,color[k%2]);

}

}

</script>

</body>

</html>

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

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

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

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

<!DOCTYPE html>

<head>

<title>正八边形组合正方形平面镶嵌图案</title>

</head>

<body>

<canvas id="myCanvas" width="500" height="500" style="border:3px double #996633;">

</canvas>

<script type="text/javascript">

var canvas = document.getElementById('myCanvas');

var ctx = canvas.getContext('2d');

var sqrt2=Math.sqrt(2);

var color=['#00FFFF','#00FF00'];

function drawOctagon(x,y,L,c)

{

ctx.beginPath();

ctx.moveTo(x-L/2-sqrt2*L/2,y-L/2);

ctx.lineTo(x-L/2-sqrt2*L/2,y+L/2);

ctx.lineTo(x-L/2,y+L/2+sqrt2*L/2);

ctx.lineTo(x+L/2,y+L/2+sqrt2*L/2);

ctx.lineTo(x+L/2+sqrt2*L/2,y+L/2);

ctx.lineTo(x+L/2+sqrt2*L/2,y-L/2);

ctx.lineTo(x+L/2,y-L/2-sqrt2*L/2);

ctx.lineTo(x-L/2,y-L/2-sqrt2*L/2);

ctx.closePath();

ctx.fillStyle = c;

ctx.fill();

ctx.strokeStyle="black";

ctx.stroke();

}

ctx.fillStyle="#FFFF00";

ctx.fillRect(0,0,canvas.width,canvas.height);

var L=30;

var y0=(sqrt2+1)*L/2;

for (k=0;k<11;k++)

{

if (k%2==0)

{

x0=(sqrt2+1)*L/2;

}

else

{

x0=-L/2;

}

y=y0+(k-1)*(sqrt2+2)*L/2;

for (i=0;i<7;i++)

{

x=x0+i*(2+sqrt2)*L;

drawOctagon(x,y,L,color[k%2]);

}

}

</script>

</body>

</html>

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

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

JavaScript图形实例：平面镶嵌图案的更多相关文章

  1. JavaScript图形实例：圆形图案

    在HTML5的Canvas 2D API中,可以调用arc方法绘制圆或圆弧.该方法调用格式为: context . arc(x, y, radius, startAngle, endAngle, an ...

  2. JavaScript图形实例：窗花图案

    1．窗花基本框线 设定曲线的坐标方程为: n=25; r=100; x=r/n*cos(5*θ)+r*cos(θ); y=r/n*sin(5*θ)+r*sin(θ);          (0≤θ≤2π ...

  3. JavaScript图形实例：线段构图

    在“JavaScript图形实例:四瓣花型图案”和“JavaScript图形实例:蝴蝶结图案”中,我们绘制图形时,主要采用的方法是先根据给定的曲线参数方程计算出两点坐标,然后将两点用线段连接起来,线段 ...

  4. JavaScript图形实例：再谈IFS生成图形

    在“JavaScript图形实例:迭代函数系统生成图形”一文中,我们介绍了采用迭代函数系统(Iterated Function System,IFS)创建分形图案的一些实例.在该文中,仿射变换函数W的 ...

  5. JavaScript图形实例：随机SierPinski三角形

    在“JavaScript图形实例:SierPinski三角形”中,我们介绍了SierPinski三角形的基本绘制方法,在“JavaScript图形实例:迭代函数系统生成图形”一文中,介绍了采用IFS方 ...

  6. JavaScript图形实例：迭代函数系统生成图形

    迭代函数系统(Iterated Function System,IFS)可以用来创建分形图案,它是分形理论的重要分支,也是分形图形处理中最富生命力而且最具有广阔应用前景的领域之一.这一工作最早可以追溯 ...

  7. JavaScript图形实例：四瓣花型图案

    设有坐标计算公式如下: X=L*(1+SIN(4α))*COS(α) Y=L*(1+SIN(4α))*SIN(α) 用循环依次取α值为0~2π,计算出X和Y,在canvas画布中对坐标位置(X,Y)描 ...

  8. JavaScript图形实例：纺织物图案

    1．简单纺织物图案 先在HTML页面中设置一个画布. <canvas id="myCanvas" width="360" height="240 ...

  9. JavaScript图形实例：布纹图案

    1．椭圆型布纹图案 先在HTML页面中设置一个画布. <canvas id="myCanvas" width="300" height="300 ...

随机推荐

  1. DS-4-单链表的各种插入与删除的实现

    typedef struct LNode { int data; struct LNode *next; }LNode, *LinkList; 带头结点的按位序插入: //在第i个位置插入元素e bo ...

  2. Numpy中的广播机制，数组的广播机制（Broadcasting）

    这篇文章把numpy中的广播机制讲的十分透彻: https://jakevdp.github.io/PythonDataScienceHandbook/02.05-computation-on-arr ...

  3. 单数据盘或者很多数据盘mount挂载到某个目录

    单数据盘挂载背景 /dev/sda盘挂载到/opt/data2,此目录有数据,且postgres进程在写入该目录 单数据盘挂载操作方法 1)查看/opt/data2 目录下有哪些文件 #ls /opt ...

  4. 良心之作送你几个Xsheel使用小技巧

    ❝ 工作中无可避免的会使用到Xsheel,接下来咔咔给你介绍几个小技巧,让你工作游刃有余. ❞ 一.告别繁琐 你的Xsheel连接后是不是这样的 哦!这个也太烦了我至少得在敲俩次命令才能到我的工作目录 ...

  5. Linux监控CPU，内存，磁盘I/O

    简单讲讲Linux下监控 [CPU] 监控CPU,top命令能够实时监控系统的运行状态,并且可以按照CPU.内存和执行时间进行排序,同时top命令还可以通过交互式命令进行设定显示,通过top命令可以查 ...

  6. Java中的四种引用方式

      无论是通过引用计数算法判断对象的引用数量,还是通过可达性分析算法判断对象的引用链是否可达,判定对象是否存活都与"引用"有关.在Java语言中,将引用又分为强引用.软引用.弱引用 ...

  7. lin-cms-dotnetcore功能模块的设计

    lin-cms-dotnetcore功能模块的设计 先来回答以下问题. 1.什么是cms? Content Management System,内容管理系统. 2.dotnetcore是什么? .NE ...

  8. JavaScript 集合基本操作

    参考 MDN 集合 Array 1. 2种创建数组的方式 var fruits = [] ; var friuits = new Array(); 2. 遍历 fruits.forEach(funct ...

  9. TCP实战二(半连接队列、全连接队列)

    TCP实验一我们利用了tcpdump以及Wireshark对TCP三次握手.四次挥手.流量控制做了深入的分析,今天就让我们一同深入理解TCP三次握手中两个重要的结构:半连接队列.全连接队列. 参考文献 ...

  10. Python实用笔记 （19）面向对象编程——访问限制

    在Class内部,可以有属性和方法,而外部代码可以通过直接调用实例变量的方法来操作数据,这样,就隐藏了内部的复杂逻辑. 但是,从前面Student类的定义来看,外部代码还是可以自由地修改一个实例的na ...