当前位置：
文档之家› JavaScript图形实例：平面镶嵌
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);
</canvas>
<script type="text/javascript">
varcanvas =document.getElementById('myCanvas');
varctx=canvas.getContext('2d');
varsqrt3=Math.sqrt(3);
varcolor=['#00FFFF','#00FF00'];
{
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.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]);
ctx.strokeRect(x+L,y-L,L,L);
ctx.fillRect(x+L,y-L,L,L);
}
}
}
</script>
</body>
</html>
在浏览器中打开包含这段HTML代码的html文件，可以看到在浏览器窗口中绘制出如图5所示的正三角形和正方形组合平面镶嵌图案。
图5正三角形和正方形组合平面镶嵌图案
{
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();
}
}
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.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";
<body>
<canvas id="myCanvas" width="500" height="500" style="border:3pxdouble #996633;">
</canvas>
<script type="text/javascript">
varcanvas =document.getElementById('myCanvas');
图4正六边形平面镶嵌图案
2
还可以用一种以上的多边形来实现的平面镶嵌。
（1）正三角形和正方形组合平面镶嵌。
可以使用正三角形与正方形，通过组合后重复排列的方式完成镶嵌。编写如下的HTML代码。
<!DOCTYPEhtml>
<head>
<title>正三角形和正方形组合平面镶嵌图案</title>
</head>
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);
（3）用正六边形平铺。
用正六边形进行平面镶嵌，编写如下的HTML代码。
<!DOCTYPEhtml>
<head>
<title>正六边形平面镶嵌图案</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:3pxdouble #996633;">
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);
<!DOCTYPEhtml>
<head>
<title>正八边形组合正方形平面镶嵌图案</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:3pxdouble #996633;">
</canvas>
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++)
（2）正六边形与正三角形组合平面镶嵌。
可以使用正六边形与正三角形，通过组合后重复排列的方式完成镶嵌。编写如下的HTML代码。
<!DOCTYPEhtml>
<head>
<title>正六边形与正三角形组合平面镶嵌图案</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:3pxdouble #996633;">
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++)
<title>正方形平面镶嵌图案</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="500" style="border:3pxdouble #996633;">
