文字二叉树

最新推荐文章于 2022-11-07 21:12:35 发布

Dreamer.He

最新推荐文章于 2022-11-07 21:12:35 发布

阅读量291

点赞数

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

版权

<!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.5;/*衰减比率*/
    var count=7;/*迭代次数*/
    var a=-Math.PI/2;/*角度*/
    var fontsize=20;
    var str="春江潮水连海平";

    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/6*(0.5+Math.random()/2);
        var aR=a+Math.PI/6*(0.5+Math.random()/2);
        var fontsize=count*4;
        var L=str.length*fontsize;

        var words=document.createElement("words");
        svg.appendChild(words);
        words.outerHTML="<text x="+x1+" y="+y1+" transform='rotate("+a*180/Math.PI+","+x1+","+y1+")' fill='green' font-size="+fontsize+">"+str+"</text>"
        if (count>0){
            show(x2,y2,L,rate,count-1,aL);
            show(x2,y2,L,rate,count-1,aR);
            if(count==1){#在二叉树的尾端生成小圆点，没有这一部分代码则不会在末尾产生原点
                var circle=document.createElement("circle");
                svg.appendChild(circle);
                circle.outerHTML="<circle cx="+x2+" cy="+y2+" r="+5*Math.random()+" fill='red'>"
            }
        }
    }
    show(x0,y0,L,rate,count,a);

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

在这里插入图片描述

其中，文字旋转：

<svg id="svg01" width=800 height=600>
   
    <text x="200" y="200" fill="red">this is a javascript</text>
    <text x="200" y="200" fill="red" transform="rotate(45)">this is a javascript</text><!--围绕原点旋转45度-->
    <text x="200" y="200" fill="red"  transform="rotate(45,200,200)">this is a javascript</text><!--围绕点(200,200)旋转45度-->
    <text x="200" y="200" fill="green" rotate="90">this is a javascript</text><!--每个字符相比原字符旋转90度-->
</svg>