大家好，欢迎来到IT知识分享网。
你走过迷宫吗？我们看到的迷宫很多也是分形的影子。
如下图：
迷宫
下面我们就来分享一个迷宫似的H分形。
字母H是一个对称图形，左右上下对折都能重合，中间横线中间就是它的中心点。
H分形就是由一个字母H演化出迷宫一样场景的分形图案，其构造过程是：取一个中心点（x,y），以此中心点绘制一条长为L的水平直线和两条长为H的竖直直线，构成一个字母“H”的形状；再以两条竖直直线的上下共4个端点为中心点，分别绘制一条长为L/2的水平直线和两条长为H/2的竖直直线；重复以上操作直至达到要求的层数，可以绘制出H分形图案。
【先看效果图】
H分形 – 层次0~4循环演示
【上代码】
<body> <canvas id="myCanvas" width="500" height="500" style="border:3px double #;"></canvas> <script type="text/javascript"> var canvas = document.getElementById('myCanvas'); var ctx = canvas.getContext('2d'); ctx.strokeStyle = "red"; ctx.lineWidth = 3; var maxdepth =0; var curdepth = 0; //递归绘制H function drawH(x,y,length,hight) { //绘制当前层H的三边 ctx.beginPath(); ctx.moveTo(x-length/2,y); ctx.lineTo(x+length/2,y); ctx.moveTo(x-length/2,y-hight/2); ctx.lineTo(x-length/2,y+hight/2); ctx.moveTo(x+length/2,y-hight/2); ctx.lineTo(x+length/2,y+hight/2); ctx.stroke(); //当前层数+1 curdepth++; //当前层数小于等于最大层次时，递归绘制四个角上的H if(curdepth <= maxdepth) { drawH(x-length/2,y-hight/2,length*0.5,hight*0.5); drawH(x-length/2,y+hight/2,length*0.5,hight*0.5); drawH(x+length/2,y-hight/2,length*0.5,hight*0.5); drawH(x+length/2,y+hight/2,length*0.5,hight*0.5); } //绘制完成回归原来层次，最终还是归0 curdepth--; } function go() { ctx.clearRect(0,0,canvas.width,canvas.height); drawH(250,250,240,180); maxdepth++; //当最大层次大于4时归0，用于循环演示 if (maxdepth > 4) { maxdepth=0; } } window.setInterval('go()', 2000); </script> </body>【要点分析】
- 当指定一个层次绘制时，递归结束条件是当前层次大于最大层次；
- 因为一个H分形一层有4个小H要绘制，curdepth–;来控制当前层一样；
【注】参考于互联网，一起分享学习成长。
免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/177768.html
