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

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. 有a1，a2，a3，a4，四个数组，四个数组重新组合成一个数组(A)，间隔是10个元素

    好久没折腾Py了,这是去年年初2019.3月发在Q中的一个记录,因不从事这个,并且被在工厂耽误10几年,所以很少写Blog在这里,感觉这里比较正式,而在Q中只是随意性的记载, 但发布图片总是需要另外再 ...

  2. fiddler下载安装

    1.官网https://www.telerik.com/fiddler 2.按照要求填写 3.傻瓜式安装 4.安装https证书

  3. cb19a_c++_只适合string类型的操作_提取_追加_替换

    *cb19a_c++_只适合string类型的操作_提取_追加_替换三个substr重载函数-获取一个字符串的一部分六个append重载函数-追加字符十个replace重载函数-替换更换 重载函数越多 ...

  4. demo的自动化测试框架设计

    [准备环境] pycharm [思路] Python+request+unittest+HTMLTestRunner 框架 框架的可读性需要强 公共方法提取 可变参数需要提取放入配置文件 做好日志记录 ...

  5. js银行卡四个数字一个空格

    !function () { document.getElementById('bankCard').onkeyup = function (event) { var v = this.value; ...

  6. 上位机面试必备——TCP通信灵魂二十问【上】

    关注公众号获取更多干货 TCP通信协议应该是上位机开发中应用最广泛的协议,无论是西门子S7协议.三菱MC协议或者是欧姆龙的Fins-TCP协议等,都是TCP通信协议的典型应用.很多人在上位机面试时,都 ...

  7. Java多线程之volatile详解

    本文目录 从多线程交替打印A和B开始 Java 内存模型中的可见性.原子性和有序性 Volatile原理 volatile的特性 volatile happens-before规则 volatile ...

  8. Python3-paramiko模块-基于SSH的远程连接模块

    Python3中的paramiko模块,基于SSH用于连接远程服务器并执行相关操作 http://docs.paramiko.org/en/2.1/ SSHClient 用于连接远程服务器并执行基本命 ...

  9. 大厂程序员因厌恶编程，辞去月薪2w+的工作去当司机？

    世界好小啊,刚在一个 UP 主的群里看到一个视频,标题叫做:"失业了工作没找到,却稀里糊涂上了知乎热搜,2000 多万人围观,我--" 说实话,看到视频的封面,我的下巴当时就掉到了 ...

  10. [POJ3977] Subet（二分枚举）

    解题报告 前置知识:折半查找法(二分法) 顾名思义,折半就是把一组数据(有序)分成两半,判断我们要找的key值在哪一半当中,不断重复该操作直至找到目标key值,这玩意说白了就是二分的另一个名字. 解决 ...