java分形图代码,JavaScript图形实例：H分形

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

图1  H分形图案的生成

H分形采用递归过程易于实现，编写如下的HTML代码。

H分形

var canvas = document.getElementById('myCanvas');

var ctx = canvas.getContext('2d');

ctx.strokeStyle = "red";

ctx.lineWidth = 3;

var maxdepth =4;

var curdepth = 0;

function drawH(x,y,length,hight)

{

curdepth++;

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();

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);

}

curdepth--;

}

drawH(250,250,240,180);