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

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. UWP实现第二字幕并且跟随系统的设置

    话不多说,先看一下最终效果 系统设置默认 在系统设置里面更改字幕的显示效果 需求 要求播放器可以显示第二字幕,类似旁白的文字解释.比如片中出现了一个专业术语,这个时候观众可能有些疑惑.所以需要在屏幕上 ...

  2. MongoDB文档(二)--查询

    (一)查询文档 查询文档可以使用以下方法 # 以非结构化的方式显示所有的文档 db.<collectionName>.find(document) # 以结构化的方式显示所有文档 db.& ...

  3. Redis 的 5 种数据类型的基本使用

    Redis 中的 5 种数据类型 Redis 中 有 5 种数据结构,分别是 "字符串/string","列表/list","集合/set" ...

  4. vue父路由高亮不显示

    vue父路由高亮不显示 首页和考试中心作为父路由,点击时发现不高亮,是因为路由配置有问题 因为首页和考试中心已经重定向到homepage和tpersonal-data这两个路由,当点击首页和考试中心的 ...

  5. RocketMQ(1)---架构原理及环境搭建

    一.架构简述 RocketMQ阿里开源的一个分布式消息传递和流媒体平台,具有低延迟,高性能和可靠性, 万亿级容量和灵活的可伸缩性.跟其它中间件相比,RocketMQ的特点是纯JAVA实现,在发生宕机和 ...

  6. 使用IntelliJ/Eclipse生成类图

    IntelliJ可以安装一个免费的pugins - Code Iris. PlantUML 在Eclipse中 - ObjectAidPapyrusEclipse Modeling Tools 查看原 ...

  7. 深入理解React：事件机制原理

    目录 序言 DOM事件流 事件捕获阶段.处于目标阶段.事件冒泡阶段 addEventListener 方法 React 事件概述 事件注册 document 上注册 回调函数存储 事件分发 小结 参考 ...

  8. 全国计算机等级考试二级笔试样卷Java语言程序设计

    一.选择题((1)-(35)每小题2分,共70分) 下列各题A).B).C).D)四个选项中,只有一个选项是正确的,请将正确选项涂写在答题卡相应位置上,答在试卷上不得分. (1)下列选项中不符合良好程 ...

  9. Elasticsearch从入门到放弃：分词器初印象

    Elasticsearch 系列回来了,先给因为这个系列关注我的同学说声抱歉,拖了这么久才回来,这个系列虽然叫「Elasticsearch 从入门到放弃」,但只有三篇就放弃还是有点过分的,所以还是回来 ...

  10. 发家致富的鬼bug。让人心动

    这个bug是我目前见过最离谱的bug…… 颠覆了我二十多年的世界观,天上掉馅饼这种好事第一次砸我身上(雾),至今我都没想明白其中的原理. 情况是这样的,去年我出门去外地有些事情要处理.由于要呆很长时间 ...