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

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. TensorFlow从0到1之TensorFlow实现简单线性回归（15）

    本节将针对波士顿房价数据集的房间数量(RM)采用简单线性回归,目标是预测在最后一列(MEDV)给出的房价. 波士顿房价数据集可从http://lib.stat.cmu.edu/datasets/bos ...

  2. 附024.Kubernetes_v1.18.3高可用部署架构二

    kubeadm介绍 kubeadm概述 参考<附003.Kubeadm部署Kubernetes>. kubeadm功能 参考<附003.Kubeadm部署Kubernetes> ...

  3. 04 . Jenkins定制主题和设置项目构建信息输出颜色

    Jenkins thems自动生成定制主题css Jenkins默认界面比较丑,视觉容易疲劳,这时候就需要我们更换一个主题,让我们的Jenkins美观一些. 以下是css主题的地址 http://af ...

  4. 02 . Ansible高级用法(运维开发篇)

    自动化任务简介 假设我们要在10台linux服务器上安装一个nginx服务,手动是如何做的? # 第一步, ssh登录NUM(1,n)服务器 # 第二步,输入对应服务器密码 # 第三步,执行命令: y ...

  5. 关于word2vec的一些问题

    CBOW v.s. skip-gram CBOW 上下文预测中心词,出现次数少的词会被平滑,对出现频繁的词有更高的准确率 skip-gram 中心词预测上下文,训练次数比CBOW多,表示罕见词更好 例 ...

  6. java 加密与解密艺术

    视频来自黑马程序员公开课 对称加密之后的密文可能存在乱码,这些乱码无法识别,信息经过加密后会变成一串毫无规律的二进制串,此时再选择一种编码方式来展示,通常是 BASE64 格式的编码. 为了解决这个问 ...

  7. Halcon斑点分析BlobAnalysis解析

    斑点分析的算法非常简单:在图像中,相关对象的像素(也称为前景)通过其灰度值来识别.例如,图中示例显示了液体中的组织颗粒.这些粒子是明亮的,液体(背景)是暗的.通过选择明亮的像素(阈值),可以很容易检测 ...

  8. Springboot在包含有参构造方法的类中使用@Value注解取值

    我们在Springboot中经常使用@Value注解来获取配置文件中的值,像下面这样 @Component class A { @Value("${user.value}") pr ...

  9. Halcon斑点分析官方示例讲解

    官方示例中有许多很好的例子可以帮助大家理解和学习Halcon,下面举几个经典的斑点分析例子讲解一下 Crystals 图中显示了在高层大气中采集到的晶体样本的图像.任务是分析对象以确定特定形状的频率. ...

  10. pikachu靶场-XSS

    .Tips: 一般查询接口容易出现反射型XSS,留言板容易出现存储型XSS 由于后台可能存在过滤措施,构造的script可能会被过滤掉,而无法生效,或者环境限制了执行(浏览器): 通过变化不同的scr ...