领先的免费Web技术教程，涵盖HTML到ASP.NET

网站首页 > 知识剖析 正文

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

nixiaole 2025-01-05 19:29:31 知识剖析 12 ℃

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

如下图：


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

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

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

【先看效果图】

【上代码】

<body>
<canvas id="myCanvas" width="500" height="500" style="border:3px double #996633;"></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>


【要点分析】

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


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

Tags：

猜你喜欢

最近发表
标签列表