JavaScript图形实例：平面镶嵌
平面镶嵌
归纳:
1、拼接在同一个点的各个角的和等于 360° 2、任意三角形、四边形一定可以镶嵌. 3、一种正多边形：a.x=360° 两种正多边形：a.x+b.y=360°
练习： 1.用形状、大小完全相同的图形不能镶嵌成 平面图案的是( ) A.等腰三角形 B.正方形 C.正五边形 D.正六边形
练习：
练习： 4.用正多边形镶嵌,设在一个顶点周围有m个 正方形、n个正八边形,则 m=_____,n=______.
练习： 5.用正三角形和正六边形镶嵌,在每个顶点处 有_______个正三角形和_____ 个正六边形, 或在每个顶点处有______个正三角形和 ________个正六边形.
课堂小结
要用正多边形镶嵌成一个平面的关键是看：这 种正多边形的一个内角的倍数是否是360°， 在正多边形里，正三角形的每个内角都是 60°，正四边形的每个内角都是90°，正六 边形的每个内角都是120°，这三种多边形的 一个内角的倍数都是360°，而其他的正多边 形的每个内角的倍数都不是360°，所以说： 在正多边形里只有正三角形、正四边形、正六 边形可以镶嵌，而其他的正多边形不可镶嵌．
2.不能镶嵌成平面图案的正多边形组合为(
A.正八边形和正方形
)
B.正五边形和正十边形
C.正六边形和正三角形 D.正六边形和正八边形
练习：
3.用正三角形和正六边形镶嵌,若每一个顶点周围有 m个正三角形、n 个正六边形,则m,n满足的关系式是 ( )
平面镶嵌的认识与操作
平面镶嵌的认识与操作
在设计领域中，平面镶嵌是一项常见且重要的技术，它能够将不同
的元素有机地结合在一起，形成独特而具有美感的图案。本文将介绍
平面镶嵌的基本概念和操作技巧，并探讨其在设计中的应用。
一、平面镶嵌的基本概念
平面镶嵌是一种通过将不同的图形拼接在一起来创造出复杂而连续
的图案的技巧。在平面镶嵌中，每个图形都被称为“镶嵌单元”，它们
可以是多边形、线条、弧形等。通过合理地组织和安排这些镶嵌单元，我们可以创造出丰富多样的图案。
平面镶嵌根据图形之间的连接方式可以分为三类：共享边、重叠和
交叉。共享边是指两个相邻的镶嵌单元共享一个边，形成紧密的连接；重叠是指两个镶嵌单元部分或完全重叠，营造出立体感；交叉是指两
个镶嵌单元相互交叉，并在重叠部分形成新的图形。
二、平面镶嵌的操作技巧
1. 规划布局：在进行平面镶嵌之前，我们首先需要规划好整体的布局。根据设计需求，确定图案的大小、形状和组成元素，并考虑元素
之间的比例和对称性。
2. 选择合适的镶嵌单元：根据设计主题和风格选择合适的镶嵌单元。可以使用传统的几何形状，也可以尝试一些创新的图形，以增加图案
的独特性和创意性。
3. 精确测量和切割：在制作镶嵌单元时，需要进行精确的测量和切割。使用尺子、铅笔和切割工具等工具，确保每个镶嵌单元的大小和
形状都准确无误。
4. 确定连接方式：在进行平面镶嵌时，需要决定不同镶嵌单元之间
的连接方式。可以使用胶水、缝纫、焊接等方法，根据材料的特性和
实际需求选择适合的连接方式。
5. 调整和优化：在镶嵌的过程中，可能会出现一些不完美的地方，
平面图形的镶嵌-ppt课件
〔1〕 正三角形与正方形的平面镶嵌
设在一个顶点周围有m个正三角形，n个正方形的角。
m 3 60m 90n 360 n 2
留意：同一个组合会有 不同的镶嵌效果
①
②
〔2〕正三角形与正六边形的平面镶嵌 图案 设在一个顶点周围有m个正三角形，n个正六〔边Ⅰ形的〕角。
60m120n 360 mn 14,mn 22
用两种正多边形镶嵌不能与正三角形匹配的正多边形是角形匹配的正多边形是aa正方形正方形bb正六边形正六边形cc正十二边形正十二边形dd正十八边形正十八边形当围绕一点拼在一起的几个正多边形的内角和加在一起恰好组成一个周角时就能镶嵌成一个平面图形
新课标北师大版课件系列
<初中数学> 八年级 上册
7.4 平面镶嵌
3、下面四种正多边形中,用同一种图形不能平
C 面镶嵌的是( ).
A
B
C
D
练习三
如图用两种颜色的正六边形的砖按图所示的
规律,镶嵌成假设干个图案：
18 (1).第4个图案中有白色地砖(
)块.
(2).第n个图案中有白色地砖( 4n+2)块.
试试看:
请他用两种或两种以上 的多边形设计镶嵌图案
以下多边形组合，可以铺满地面的是： 〔1〕正三角形与正六边形； 〔2〕正三角形与正方形； 〔3〕正方形与正八边形； 〔4〕正六边形与正八边形； 〔5〕正三角形、正方形与正六边形。
平面图形的镶嵌图案设计
源自文库平面图形的镶嵌图案设计01
艺术上的镶嵌
埃舍尔镶嵌图片欣赏
荷兰著名版画艺术家 埃舍尔
镶嵌艺术离我们很遥远吗？
请看这张作品， 这也是镶嵌，它 是怎么样做出来 的呢？
请往下看， 实际上是很 简单的
你看懂了吗？实际上 是用正方形 “剪”“拼”出来的
你也可以进行尝试， 小结： 设计出精美的镶嵌作品来， 很多看似复杂的镶嵌作品，其基本图形 生活中从来就不缺少 其实是由能进行镶嵌的三角形、四边形、 正六边形通过“剪”“撕”“补”“贴” “美”，关键是要有一双 得到的。 善于发现的眼睛和大胆探 镶嵌艺术离我们并不遥远，只要你注意观察， 索的精神！
大胆实践，你也能做出漂亮的镶嵌图案。
平面镶嵌
正三角形与正方形、正 六边形的平面镶嵌
练习三：
边长为a的正方形与下列边长为a的正多边形组合起来， 不能镶嵌成平面的是（ ）
B
①正三角形；②正五边形；③正六边形；④正八边形 A. ① ② B. ② ③ C. ① ③ D. ① ④
练习四
如图用两种颜色的正六边形的砖按图所示的 规律,镶嵌成若干个图案：
若用一种正多边形进行镶嵌 ， 下列哪些正多边形可以镶嵌？ 为什么呢？ ①正三角形； ②正方形 ； ③正五边形； ④正六边形； ⑤正八边形； ⑥正十二边形。 还有其他的正多边形可以进行 镶嵌吗？
只用一种正多边形 进行平面镶嵌，有三种 方法：3个正六边形；4 个正四边形；6个正三角 形。
能否 平面 镶嵌
18 )块. (2).第n个图案中有白色地砖( 4n+2 )块.
(1).第4个图案中有白色地砖(
1、镶嵌的要求：
无缝隙，不重叠
2、多边形能否镶嵌的条件：
每个顶点处几个角的和为
3Fra Baidu bibliotek0°
镶嵌画欣赏
再见！
6
4
C
A
B
C
D
试试看:
请你用两种或两种以上 的多边形设计镶嵌图案
下列多边形组合，能够铺满地面的是：
（1）正三角形与正六边形；
（2）正三角形与正方形；
（3）正方形与正八边形； （4）正六边形与正八边形；
平面图形的镶嵌
经过研究，我发现：四边形（在此指正方形）、 八边形或不规则图形，只要保证其为全等图形或 形状大小完全相同的任意一种图形，且彼此之间 不留空隙，不重叠地铺成一片，就叫做平面图形 的镶嵌。
这是一幅古 代的窗户的 图片，图中 的大正方形 是由每一个 同样的小正 方形经过拼 装后得到的。
这是我在一个餐厅中拍摄到的，图中的墙壁、地砖、洗手池的台子 都是根据数学中的“平面图形的镶嵌”而拼装的全等的正方形或长 方形，让人感觉优雅、舒适。黑白的两种色调，给人大气的感觉。
这是我在同 学家的一间 卧室拍摄到 的，上部正 方形的墙砖 平铺开来， 下部整齐的 拼放橘黄色 的菱形图案。 不同的拼放 图案，却有 相同的拼房 效果，这便 是——“平 面图形的镶 嵌”效果！
Leabharlann Baidu
这是我在一 位老奶奶家 拍摄到的照 片，用这样 一种正方形 进行拼接， 且不重叠地 铺成一片， 就叫做平面 图形的镶嵌。
经过研究，我发现：这种图形只要保证每个拼 接处的几个角恰好形成一个周角，也就是它们 的和为3600；这样的同一种任意三角形可以镶 嵌，这就是“平面图形的镶嵌”。
经过调查，我了解到：上面这种图案的使用率仅次于正方 形与长方形。经过研究，我发现：这种图形可以分成两种 看：①由六边形组成，②由图一这种三个六边形组成的图 形，这样的图形应用的较多，同上个图形一样，只要保证 每个图形的拼接处的几个角恰好形成一个240°的角，这 就是“平面图形的镶嵌”。
平面镶嵌学习平面镶嵌形的构造
平面镶嵌学习平面镶嵌形的构造在数学中，平面镶嵌是指将若干个多边形拼接在一起，使得它们恰
好填满平面且无重叠部分的一种方法。平面镶嵌形广泛应用于几何学、拓扑学和计算机图形学等领域。本文将深入探讨平面镶嵌形的构造方
法和相关概念。
一、基本概念
1.1 多边形：
多边形是由若干条线段所组成的图形，每条线段的两个端点恰好相连，且相邻线段不能相交。
1.2 平面镶嵌形：
平面镶嵌形由若干个多边形组成，这些多边形通过共享边界线段相
连接，并且没有重叠部分。
二、平面镶嵌的构造方法
2.1 正则多边形的平面镶嵌：
正则多边形是指所有边和角均相等的多边形，如正方形、正三角形等。这些多边形可以很容易地构造出平面镶嵌形，如正六边形的平面
镶嵌由许多相邻的小三角形组成。
2.2 利用格子图形的平面镶嵌：
格子图形是以格点为顶点，边长相等的正方形为边所形成的图形。
利用格子图形可以构造出一些规则且美观的平面镶嵌形，比如著名的
棋盘格。
2.3 等边三角形的平面镶嵌：
等边三角形是指所有边均相等的三角形。通过将等边三角形按照一
定规则组合，可以得到各种复杂的平面镶嵌形，如蜂窝状镶嵌等。
三、平面镶嵌的性质
3.1 欧拉定理：
欧拉定理是数学中与平面镶嵌相关的重要定理，它表达了平面镶嵌
形中的顶点数、边数和面数之间的关系。具体而言，对于平面镶嵌形，有公式V - E + F = 2，其中V表示顶点数，E表示边数，F表示面数。
3.2 对偶性：
平面镶嵌形的对偶性是指将一个平面镶嵌形的顶点和面互换，得到
的新图形仍然是平面镶嵌形。通过对偶性，可以将一些难以观察的性
JavaScript图形实例：正六边形的平铺
JavaScript图形实例：正六边形平铺
1．绘制正六边形
设有圆心为O的圆，半径为R，可以在圆内接一个正六边形，如图1所示。图中，r=R*cos(30°)
t=R*sin(30°)
由此，可以确定正六边形6个顶点的坐标。
图1 圆内接正六边形
这样，给定正六边形的圆心坐标和外接圆半径Radius，可以绘制一个正六边形。编写如下的HTML代码。
<!DOCTYPE HTML>
<html>
<head>
<title>一个正六边形</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx.lineCap = "round";
ctx.lineJoin = "round";
ctx.strokeStyle = "rgba(40, 40, 40, 0.6)";
ctx.translate(200, 200);
var angle = Math.PI * 2 / 3;
var a = Math.PI / 6;
《平面图形的镶嵌》)
适用于具有历史和文化底蕴的建筑空间，如博物馆、图书馆、文化 街区等地面装饰。
设计理念
注重历史与现代的融合，通过复古元素的运用，传承和弘扬传统文化， 营造出具有历史感和文化韵味的空间氛围。
案例三：创意拼贴墙饰
01
作品特点
运用各种材质、形状和颜色的图形进行创意拼贴，形成独具特色的墙面
装饰效果。
02
应用场景
适合创意办公空间、艺术展览、商业空间等需要展示个性和创意的墙面
源自文库
装饰。
03
设计理念
强调创意、个性和自由的结合，通过多样化的图形和材质的运用，打破
传统装饰的束缚，创造出独具匠心和艺术感染力的墙面装饰效果。
05 实践操作：动手制作平面 图形镶嵌作品
材料准备与工具选择
材料
彩色纸张、硬纸板、胶水、剪刀、刻刀、直尺、铅笔等。
平面图形的镶嵌
目录
• 平面图形镶嵌基本概念 • 常见平面图形镶嵌方法 • 平面图形镶嵌设计原则与技巧 • 案例分析：优秀平面图形镶嵌作品欣赏 • 实践操作：动手制作平面图形镶嵌作品 • 总结与展望
01 平面图形镶嵌基本概念
镶嵌定义及分类
镶嵌定义
镶嵌是指将一种或多种平面图形 无缝隙、不重叠地铺满平面的过 程。
平面图形镶嵌发展趋势
多样化与个性化
随着设计需求的多样化，平面图形镶嵌将更加注重个性化 和独特性，以满足不同领域和风格的需求。
探索平面镶嵌认识平面镶嵌的基本规律
探索平面镶嵌认识平面镶嵌的基本规律
探索平面镶嵌：认识平面镶嵌的基本规律
平面镶嵌是一种将多个多边形无重叠地拼接在一起的几何方法。在
几何学中，研究平面镶嵌的基本规律对于理解多边形的组合和形状转
换有重要意义。本文将探索平面镶嵌的基本概念、分类、特征和一些
经典的例子，帮助读者加深对平面镶嵌的认识。
1. 平面镶嵌的基本概念
平面镶嵌是在平面上由多个多边形共享边界而组成的图形。其中，
各个多边形的顶点和边必须完全对应，而且没有重叠。这意味着，任
意两个多边形之间只能有公共的一个点或一条边。平面镶嵌可以看作
是将多个拼图块无缝地连接在一起，形成一个整体的图形。
2. 平面镶嵌的分类
根据平面镶嵌形状的不同，可以将平面镶嵌分为三类：凸镶嵌、半
凸镶嵌和非凸镶嵌。凸镶嵌是由一系列凸多边形组成的镶嵌，每个多
边形的所有内角都小于180度。半凸镶嵌则包含了一些凹多边形，但
是没有相邻的凹多边形。非凸镶嵌则可以由一个或多个凹多边形组成，其中的任意两个凹多边形可以共享一条边。
3. 平面镶嵌的特征
平面镶嵌具有一些特征，可以帮助我们理解和判断这些图形。首先，每个平面镶嵌都可以构成一个封闭的曲线，称为边界曲线。其次，每
个多边形都有一个邻居多边形，即与其共享边的多边形。此外，每个
顶点都与若干个多边形的顶点相连，并且镶嵌中所有的多边形都是连
通的。
4. 经典的平面镶嵌例子
在几何学中，有一些经典的平面镶嵌例子，展示了各种有趣的形状
和规律。其中之一是著名的六边形镶嵌，由正六边形组成，每个六边
形都与六个相邻的六边形共享边。此外，还有四边形镶嵌，如罗马蛇
JavaScript图形实例：正六边形的平铺
JavaScript图形实例：正六边形平铺
1．绘制正六边形
设有圆心为O的圆，半径为R，可以在圆内接一个正六边形，如图1所示。图中，r=R*cos(30°)
t=R*sin(30°)
由此，可以确定正六边形6个顶点的坐标。
图1 圆内接正六边形
这样，给定正六边形的圆心坐标和外接圆半径Radius，可以绘制一个正六边形。编写如下的HTML代码。
<!DOCTYPE HTML>
<html>
<head>
<title>一个正六边形</title>
</head>
<body>
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
ctx.lineCap = "round";
ctx.lineJoin = "round";
ctx.strokeStyle = "rgba(40, 40, 40, 0.6)";
ctx.translate(200, 200);
var angle = Math.PI * 2 / 3;
var a = Math.PI / 6;
平面镶嵌
正十二边形、正方形、正三角形
思考：几个正多边形的若干个内角和等于360°就一定能够密铺吗？
数学与艺术一同营造的秘境。（埃舍尔画简介） http://www.miaopai.com/show/xmOfeeQtJOV0oSNyxNvNjfpxfvSlumLL.htm
每个顶点处几个角的和为360°
还能找到能镶嵌的其他正多边形吗？如何寻找呢？ 正多边形可以镶嵌的条件：每个内角都能被360o 整除
仅用正多边形进行镶嵌，要嵌成一个平面，必须要求在公共顶点上所有内 角和为360度。令正多边形的边数为n,个数为m,则有
( n 2)180 m 360 n
m 6 ∴解得 n 3
பைடு நூலகம்
）
1.用形状、大小完全相同的三角形能否镶嵌呢？
结论：形状、大小完全相同的任意三角形能镶嵌成平面图形.
2.用形状、大小完全相同的四边形能否镶嵌呢？
结论：形状、大小完全相同的任意四边形能镶嵌成平面图形.
3.用形状、大小完全相同的五边形能否镶嵌呢？
1.正三角形与正方形的平面镶嵌
设在一个顶点周围有m个正三角形，n个正方形的角.
生活中常常用瓷砖严丝合缝、不留空隙地铺满墙面或地面。 从数学的角度看，就是用几何图形不留空隙、不重叠地铺满平面 的一部分，这就是平面图形的镶嵌（也叫做平面图形的密铺）.
1.正三角形的平面镶嵌
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
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.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();
}
varL=45;
for(k=0;k<14;k++)
ctx.fillRect(0,0,canvas.width,canvas.height);
varL=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代码。
varcanvas =document.getElementById('myCanvas');
varctx=canvas.getContext('2d');
varsqrt3=Math.sqrt(3);
varcolor=['#00FFFF','#00FF00'];
varL=50;
for(k=0;k<13;k++)
<!DOCTYPEhtml>
<head>
<title>正八边形组合正方形平面镶嵌图案</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:3pxdouble #996633;">
</canvas>
图4正六边形平面镶嵌图案
2
还可以用一种以上的多边形来实现的平面镶嵌。
（1）正三角形和正方形组合平面镶嵌。
可以使用正三角形与正方形，通过组合后重复排列的方式完成镶嵌。编写如下的HTML代码。
<!DOCTYPEhtml>
<head>
<title>正三角形和正方形组合平面镶嵌图案</title>
</head>
</canvas>
<script type="text/javascript">
varcanvas =document.getElementById('myCanvas');
varctx=canvas.getContext('2d');
varsqrt3=Math.sqrt(3);
varcolor=['#00FFFF','#00FF00'];
functiondrawHexagon(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);
<script type="text/javascript">
varcanvas =document.getElementById('myCanvas');
varctx=canvas.getContext('2d');
varsqrt2=Math.sqrt(2);
varcolor=['#00FFFF','#00FF00'];
（3）用正六边形平铺。
用正六边形进行平面镶嵌，编写如下的HTML代码。
<!DOCTYPEhtml>
<head>
<title>正六边形平面镶嵌图案</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:3pxdouble #996633;">
（2）正六边形与正三角形组合平面镶嵌。
可以使用正六边形与正三角形，通过组合后重复排列的方式完成镶嵌。编写如下的HTML代码。
<!DOCTYPEhtml>
<head>
<title>正六边形与正三角形组合平面镶嵌图案</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:3pxdouble #996633;">
<title>正方形平面镶嵌图案</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:3pxdouble #996633;">
</canvas>
<script type="text/javascript">
{
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/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";
图1正方形平面镶嵌图案（一）
将上述程序中的语句：x0=0;改写为：
if(k%2==0) x0=0;
elsex0=-L/2;
并将填充颜色改为单色填充，例如，ctx.fillStyle= "green";，则绘制出如图2所示的正方形平面镶嵌图案。
图2正方形平面镶嵌图案（二）
（2）用正三角形平铺。
用正三角形进行平面镶嵌，编写如下的HTML代码。
functiondrawOctagon(x,y,L,c)
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();
varcanvas =document.getElementById('myCanvas');
varctx=canvas.getContext('2d');
varcolor=['#00FFFF','#00FF00'];
varL=50;
for(k=0;k<10;k++)
{
y=k*L;
x0=0;
for(i=0;i<10;i++)
JavaScript
用形状、大小完全相同的一种或几种平面图形进行拼接，彼此之间不留空隙、不重叠地铺成一片，就叫做这几种图形的平面镶嵌。
1
我们可以采用正三角形、正方形或正六边形实现平面镶嵌。
（1）用正方形平铺。
用正方形进行平面镶嵌比较简单，编写如下的HTML代码。
<!DOCTYPEhtml>
<head>
{
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所示的正方形平面镶嵌图案。
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);
<!DOCTYPEhtml>
<head>
<title>正三角形平面镶嵌图案</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:3pxdouble #996633;">
</canvas>
<script type="text/javascript">
varctx=canvas.getContext('2d');
varsqrt3=Math.sqrt(3);
varcolor=['#00FFFF','#00FF00'];
varL=50;
vary=0;
for(k=0;k<13;k++)
{
if(k%2==0)
{
x0=-L;
y=y+sqrt3*L/2;
for(i=0;i<12;i++)
ctx.strokeRect(x+L,y-L,L,L);
ctx.fillRect(x+L,y-L,L,L);
}
}
}
</script>
</body>
</html>
在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出如图5所示的正三角形和正方形组合平面镶嵌图案。
图5正三角形和正方形组合平面镶嵌图案
</canvas>
<script type="text/javascript">
varcanvas =document.getElementById('myCanvas');
varctx=canvas.getContext('2d');
varsqrt3=Math.sqrt(3);
varcolor=['#00FFFF','#00FF00','#FFFF00'];
functiondrawHexagon(x,y,L,c)
{ຫໍສະໝຸດ Baidu
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,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);
{
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所示的正六边形平面镶嵌图案。
<body>
<canvas id="myCanvas" width="500" height="500" style="border:3pxdouble #996633;">
</canvas>
<script type="text/javascript">
varcanvas =document.getElementById('myCanvas');
ctx.closePath();
ctx.fillStyle=color[1];
ctx.stroke();
ctx.fill();
}
}
</script>
</body>
</html>
在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出如图3所示的正三角形平面镶嵌图案。
图3正三角形平面镶嵌图案