生成仿真二叉树

最新推荐文章于 2022-07-20 10:13:22 发布

Dreamer.He

最新推荐文章于 2022-07-20 10:13:22 发布

阅读量170

点赞数 1

本文链接：https://blog.csdn.net/qq_43406976/article/details/104761793

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript直方图</title>
</head>
<body>
this is a javascript
<svg id="svg01" width=800 height=600>
  
</svg>

<script>
    /*屏幕分辨率*/
    var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

    var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
    w=w*0.98;
    h=h*0.98;
    var svg=document.getElementById("svg01");
    svg.setAttribute("width",w);
    svg.setAttribute("height",h);


    var x0=w/2;
    var y0=h;
    var L=300;
    var rate=0.8;/*衰减比率*/
    var count=7;/*迭代次数*/
    var a=-Math.PI/2;/*角度*/

    function show(x0,y0,L,rate,count,a){
        var x1=x0;
        var y1=y0;
        var x2=x1+L*rate*Math.cos(a);
        var y2=y1+L*rate*Math.sin(a);
        var aL=a-Math.PI/4*(0.5+Math.random()/2);
        var aR=a+Math.PI/4*(0.5+Math.random()/2);
        var L=L*rate*(0.5+Math.random()/2);

        var lineX=document.createElement("lineX");
        svg.appendChild(lineX);

        lineX.outerHTML="<line x1="+x1+" y1="+y1+" x2="+x2+" y2="+y2+" stroke='green' stroke-width="+count+" />";

/*
        lineX.outerHTML="<line x1="+x1+" y1="+y1+" x2="+x2+" y2="+y2+" stroke='green' stroke-width=5 />";
*/
        if (count>0){
            show(x2,y2,L,rate,count-1,aL);
            show(x2,y2,L,rate,count-1,aR);
        }
    }
    show(x0,y0,L,rate,count,a);

</script>
</body>
</html>

在这里插入图片描述

Dreamer.He

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
生成仿真二叉树

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>javascript直方图</title></head><body>this is a javascript<svg id="svg0...
复制链接

扫一扫