HTML和JavaScript绘制仿真二叉树

最新推荐文章于 2021-07-01 22:01:21 发布

不羁_神话

最新推荐文章于 2021-07-01 22:01:21 发布

阅读量365

点赞数 1

分类专栏： HTML可视化文章标签： javascript 二叉树

本文链接：https://blog.csdn.net/weixin_43408020/article/details/109651902

版权

HTML可视化专栏收录该内容

9 篇文章 0 订阅

订阅专栏

觉得用HTML和JavaScript作图效果还不错，尝试一波顺便跟大家分享一下。

代码如下：

<!DOCTYPE html>
<!--Author:Mr.Pan_学狂-->
<!--finish_time:2020/11/12-->
<html>
	<head>
		<meta charset="utf-8">
		<title>仿真二叉树</title>
	</head>
	<body>
		<svg id="svgTree" width="1600" height="800"></svg>
		<script>
			var drawTree = function(ctx,startX,startY,length,depth,angle,branchWidth,angleFixed,color){
				var defaultAngle = Math.PI / 2;
				var defaultPercent = 0.1;
				var direction = angle < 0 ? -1 : 1;
				var defaultTime = 50;
				var rand = Math.random;
				var defaultBranchesNumber = angleFixed ? 2 :3 * Math.random() + 1;
				var timing = angleFixed ? 10 : 20;
				var endX = startX + length * Math.cos(angle);
				var endY = startY + length * Math.sin(angle);
				var newAngle;
				var newLength;
				var lineCap;
				var lineWidth;
				var strokeWidth;
				if (--depth <= 0){
					return true;
				}
				lineCap = "round";
				lineWidth = branchWidth;
				strokeStyle = color == null ? "rgb(0, " + (((rand() * 64) +128) >>0) + ",0)":color;
				var func = function(mStartX, mStartY, mEndX, mEndY){
					var aLine = document.createElement("line");//创建标签line
					ctx.appendChild(aLine);
					aLine.outerHTML = "<line x1="+mStartX+" y1="+mStartY+" x2="+mEndX+" y2="+mEndY+" style='stroke:"+ strokeStyle+";stroke-width:"+lineWidth+"' />";
				};
				func(startX, startY, endX, endY);
				branchWidth *= 0.55;
				for (var i = 0; i < defaultBranchesNumber; i++){
					newAngle = angleFixed ? i == 0 ? angle + defaultAngle / 3 : angle + defaultAngle / -3 : angle + defaultAngle * rand() - defaultAngle / 2;
					newLength = angleFixed ? length * 0.7 : length * (rand() * 0.55 + 0.4);
					if (depth == mDepth - i && !angleFixed){
						newAngle = defaultAngle * direction * (rand() * 0.3 + 0.8);
					}
					setTimeout(function (funcAngle, funcLength){
						drawTree(ctx, endX, endY, funcLength, depth, funcAngle, branchWidth, angleFixed, color);
					},timing, newAngle, newLength)
				}
			};
			
			//获取SVG节点
			var svgTree = document.getElementById("svgTree");
			//定义树的深度为12
			var mDepth = 12;
			//开始作图，递归
			setTimeout(function(){
				drawTree(svgTree, 750, 700, 170, mDepth, Math.PI / -2, 9, false, null);
			}, 0);
		</script>
	</body>
</html>

结果，如下图：
在这里插入图片描述
我觉得很nice！！

最后，感谢大家前来观看鄙人的文章，文中或有诸多不妥之处，还望指出和海涵。

不羁_神话

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML和JavaScript绘制仿真二叉树

觉得用HTML和JavaScript作图效果还不错，尝试一波顺便跟大家分享一下。代码如下：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>仿真二叉树</title> </head> <body>
复制链接

扫一扫