仿真二叉树
通过树枝长度递减以及角度的随机变化使得二叉树看起来像一颗仿真树,用该方法绘制的树是一棵随机树,代码如下:
<html>
<body>
<h2>仿真二叉树</h2>
<svg id="mysvg" 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;
var svg=document.getElementById("mysvg");
svg.setAttribute("width",w);
svg.setAttribute("height",h);
w=w*0.98;
h=h*0.98;
var x0=w/2;
var y0=h;
var L=200;
var rate=0.92;
var a=-Math.PI/2;
var count=11;
function show(x0,y0,L,rate,a,count){
var x1=x0;
var y1=y0;
var x2=x1+L*Math.cos(a);
var y2=y1+L*Math.sin(a);
var L=L*rate*(0.5+Math.random()*0.5);
var aL=a-Math.PI/4.5*(0.5+Math.random()*0.5);
var aR=a+Math.PI/4.5*(0.5+Math.random()*0.5);
var lineX=document.createElement("line");
svg.appendChild(lineX);
lineX.outerHTML="<line x1="+x1+" y1="+y1+" x2="+x2+" y2="+y2+" stroke='green' stroke-width="+count+" />";
if(count>0){
show(x2,y2,L,rate,aL,count-1);
show(x2,y2,L,rate,aR,count-1);
}
}
show(x0,y0,L,rate,a,count);
</script>
</body>
</html>
文字二叉树
将树枝改换成文字并实现颜色的渐变效果
<html>
<body>
<h2>文字二叉树</h2>
<svg id="mysvg" 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;
var svg=document.getElementById("mysvg");
svg.setAttribute("width",w);
svg.setAttribute("height",h);
w=w*0.98;
h=h*0.98;
var str="春江潮水连海平";
var x0=w/2;
var y0=h;
var L=200;
var rate=0.6;
var a=-Math.PI/2;
var count=7;
var fontsize=20;
function show(x0,y0,L,rate,a,count){
var fontsize=count*3;
var L=str.length*fontsize;
var x1=x0;
var y1=y0;
var x2=x1+L*Math.cos(a);
var y2=y1+L*Math.sin(a);
var aL=a-Math.PI/6;
var aR=a+Math.PI/6;
var words=document.createElement("text");
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,aL,count-1);
show(x2,y2,L,rate,aR,count-1);
}
}
show(x0,y0,L,rate,a,count);
show(x0,y0,L,rate,a,count);
show(x0,y0,L,rate,a,count);
</script>
</body>
</html>
苹果树
在文字二叉树的基础上在顶部添加了不同颜色的“果实”
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<h2><center>文字二叉树</center></h2>
<svg id="mysvg" 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;
var svg=document.getElementById("mysvg");
svg.setAttribute("width",w);
svg.setAttribute("height",h);
w=w*0.98;
h=h*0.98;
var str="这是一棵文字树";
var x0=w/2;
var y0=h;
var L=200;
var rate=0.6;
var a=-Math.PI/2;
var count=7;
var fontsize=20;
function show(x0,y0,L,rate,a,count){
var fontsize=count*3;
var L=str.length*fontsize;
var x1=x0;
var y1=y0;
var x2=x1+L*Math.cos(a);
var y2=y1+L*Math.sin(a);
var aL=a-Math.PI/6*(0.5+0.5*Math.random());
var aR=a+Math.PI/6*(0.5+0.5*Math.random());
var words=document.createElement("text");
svg.appendChild(words);
words.outerHTML="<text x="+x1+" y="+y1+" transform='rotate("+a*180/Math.PI+","+x1+","+y1+")' fill='rgb(0,"+(250-count*30)+",0)' font-size="+fontsize+">"+str+"</text>";
if(count>0){
show(x2,y2,L,rate,aL,count-1);
show(x2,y2,L,rate,aR,count-1);
if (count==1){
var apple=document.createElement("circle");
svg.appendChild(apple);
apple.outerHTML="<circle cx="+x2+" cy="+y2+" r="+6*Math.random()+" fill='rgb("+(150+100*Math.random())+",0,0)'/>";
}
}
}
show(x0,y0,L,rate,a,count);
show(x0,y0,L,rate,a,count);
</script>
</body>
</html>