HTML and JavaScript draw simulation binary tree

I think the effect of drawing with HTML and JavaScript is pretty good, try a wave and share with you by the way.

code show as below:

<!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>

As a result, as shown below:
Insert picture description here
I think it's very nice! !

Finally, thank you all for coming to watch my article. There may be many improprieties in the article, and I hope to point out He Haihan.

HTML and JavaScript draw simulation binary tree

Guess you like