有趣的分形(三):H分形

你走过迷宫吗？我们看到的迷宫很多也是分形的影子。

如下图：

下面我们就来分享一个迷宫似的H分形。

字母H是一个对称图形，左右上下对折都能重合，中间横线中间就是它的中心点。

H分形就是由一个字母H演化出迷宫一样场景的分形图案，其构造过程是：取一个中心点（x,y），以此中心点绘制一条长为L的水平直线和两条长为H的竖直直线，构成一个字母“H”的形状；再以两条竖直直线的上下共4个端点为中心点，分别绘制一条长为L/2的水平直线和两条长为H/2的竖直直线；重复以上操作直至达到要求的层数，可以绘制出H分形图案。

【先看效果图】

【上代码】

<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 drawhx-length2y-hight2length0.5hight0.5 drawhx-length2yhight2length0.5hight0.5 drawhxlength2y-hight2length0.5hight0.5 drawhxlength2yhight2length0.5hight0.5 0 curdepth-- function go ctx.clearrect00canvas.widthcanvas.height drawh250250240180 maxdepth 40 if maxdepth> 4)
	{
		maxdepth=0;
	}
}

window.setInterval('go()', 2000);

</script>

【要点分析】

1. 当指定一个层次绘制时，递归结束条件是当前层次大于最大层次；
2. 因为一个H分形一层有4个小H要绘制，curdepth--;来控制当前层一样；

【注】参考于互联网，一起分享学习成长。