HTML中的<canvas>分形树

最新推荐文章于 2024-02-12 07:23:32 发布

humantic

最新推荐文章于 2024-02-12 07:23:32 发布

阅读量2.1k

点赞数 1

分类专栏： HTML 文章标签：算法编程数学分形

本文链接：https://blog.csdn.net/u011762318/article/details/43164323

版权

HTML 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

如图，如果知道一个线段的长度L，和它与X轴的夹角，那么我们可以求得线段的另一个顶点的坐标，即

（L*cos（t），L*sin（t））。这里t是弧度制，且可以为任意实数，因为高中课本里任意实数的三角函数的定义就是在单位圆里进行的，如今只不过是将圆放大或缩小而已！

有了这个公式，我们就可以产生一棵树了。

首先它的初始状态应该是这样，他有一个主干和两个叉，然后下一步把两个叉再当成主干，再分成两个叉，然后再把叉当成主干，继续分下去……这其中有两个常量，其中分叉的角度是固定的，即上图中的两个叉的分开的角度，另一个是叉与主干的长度的比例应该是一个小于一的定值，至于点的坐标可以依据上面的三角函数算出来，应该可以看到，这种描述方式应该适合用函数递归进行。下面是代码：

<html>
<head>
</head>
<body>
	<canvas id="mycanvas" height="2000" width="2000" style="border:2px solid #c3c3c3"></canvas>
</body>
<script>
	var stop=12,l=0.7,slantl=40;
	var point=new Array(0,0),slantr=slantl;
	var hehe=document.getElementById("mycanvas");
	var qui=hehe.getContext("2d");
	var angle=Math.PI/2;
	slantl=slantl*Math.PI/180;slantr=slantr*Math.PI/180;
	function drawtree(prepoint,long,angle,time){
		var lpoint=new Array(0,0);
		var rpoint=new Array(0,0);
		long*=l;
		lpoint[0]=prepoint[0]+long*Math.cos(angle+slantl);
		lpoint[1]=prepoint[1]+long*Math.sin(angle+slantl);
		rpoint[0]=prepoint[0]+long*Math.cos(angle-slantr);
		rpoint[1]=prepoint[1]+long*Math.sin(angle-slantr);
		qui.beginPath();
		qui.moveTo(prepoint[0],-prepoint[1]);
		qui.lineTo(lpoint[0],-lpoint[1]);
		qui.moveTo(prepoint[0],-prepoint[1]);
		qui.lineTo(rpoint[0],-rpoint[1]);
		qui.closePath();
		qui.stroke();
		if(time>stop)	return;
		drawtree(lpoint,long,angle+slantl,time+1);
		drawtree(rpoint,long,angle-slantr,time+1);
	}
	qui.beginPath();
	qui.moveTo(1000,2000);
	qui.lineTo(1000,1800);
	qui.closePath();
	qui.stroke();
	point[0]=1000;point[1]=-1800;
	drawtree(point,200,angle,0);
</script>
</html>

其中<script>中的代码第一行变量stop表示的是函数递归的层数，l是支干与主干的比例，slantl是表示分叉的角度的一半，之所以选择一半是为了减少代码中计算部分的长度。

看一下效果：

上面那个比较像心，其实是我精心调的参数……

其实改变一下这三个参数，会有更多意想不到的图形

比如把slantl参数改成90度会出现这种形状：

humantic

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML中的<canvas>分形树

如图，如果知道一个线段的长度L，和它与X轴的夹角，那么我们可以求得线段的另一个顶点的坐标，即（L*cos（t），L*sin（t））。这里t是弧度制，且可以为任意实数，因为高中课本里任意实数的三角函数的定义就是在单位圆里进行的，如今只不过是将圆放大或缩小而已！有了这个公式，我们就可以产生一棵树了。首先它的初始状态应该是这样，他有一个主干和两个叉，然后下一步把两个叉再当成主干，再分成两个叉
复制链接

扫一扫

专栏目录