基于js和SVG的仿真二叉树_用js和svg画仿真二叉树-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43894901/article/details/105939114

本文介绍如何利用JavaScript和SVG技术实现一个仿真二叉树的绘制过程，通过代码展示了一棵美丽的树的生成步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天看到一个超美的树，（本来想在网上找代码的，结果没找到）然后就跟着书本敲了一下代码
先上图

在这里插入图片描述
这就是那个棵继樱花树之后迷倒我的另一棵树了

废话不多说，代码在下面

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Title</title>
</head>
<body>
    <svg id="svgTree" width="1536" height="759"></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");
                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 -1&& !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);
            }
        };
        var svgTree = document.getElementById("svgTree");
        var mDepth = 12;
        setTimeout(function () {
            drawTree(svgTree,750,700,170,mDepth,Math.PI/-2,9,false,null);
        },0);
    </script>
</body>
</html>