JavaScript图形实例平面镶嵌.docx
- 文档编号:12992513
- 上传时间:2023-06-10
- 格式:DOCX
- 页数:16
- 大小:120.87KB
JavaScript图形实例平面镶嵌.docx
《JavaScript图形实例平面镶嵌.docx》由会员分享,可在线阅读,更多相关《JavaScript图形实例平面镶嵌.docx(16页珍藏版)》请在冰点文库上搜索。
JavaScript图形实例平面镶嵌
JavaScript图形实例:
平面镶嵌图案
用形状、大小完全相同的一种或几种平面图形进行拼接,彼此之间不留空隙、不重叠地铺成一片,就叫做这几种图形的平面镶嵌。
1.用一种多边形实现的平面镶嵌图案
我们可以采用正三角形、正方形或正六边形实现平面镶嵌。
(1)用正方形平铺。
用正方形进行平面镶嵌比较简单,编写如下的HTML代码。
DOCTYPEhtml>
3pxdouble#996633;"> 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++) { 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); } }