![]()
<html>
<head>
<title>標準二叉樹</title>
</head>
<body>
<!-- svg元素-->
<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;
//設置變量mysvg獲取svg元素
var mysvg = document.getElementById("mySvg");
//修改SVG的寬度
mysvg.setAttribute("width",w*0.9);
//修改SVG的高度
mysvg.setAttribute("height",h*0.9);
//起始長度
var length = 200;
//衰減係數
var rate = 0.6;
//第一截線段的起點爲x0爲屏幕一般，y0爲屏幕底端
var x0 = w/2;
var y0 = h;
//迭代次數
var count = 7;
//我沒搞懂iter的作用是什麼
var iter = 0;
//定義遞歸二叉樹函數
/*根據起點(x1,y1)和終點(x2,y2繪製一個線段，長度爲length，然後將終點作爲起點，並對直線旋轉一個角度angle，把線段長度衰減一個係數rate，根據旋轉角度和衰減係數，新的終點(x2,y2)可以通過計算得到。*/
function show(x0,y0,length,rate,a,count){
// var iter++;這行代碼會使屏幕一片空白，更改爲下面的形式後纔有所顯示
var iter = iter + 1;
//設置起點位置
var x1 = x0;
var y1 = y0;
//設置終點，實際上我也不知道怎麼算的
var x2 = x1+length*Math.cos(a);
var y2 = y1+length*Math.sin(a);
//創建線段svgline的節點document.createElement("line")，課本里沒有加上var。
svgline = document.createElement("line");
//mysvg的子節點爲svgline
mysvg.appendChild(svgline);
svgline.outerHTML="<line x1="+x1+" y1="+y1+" x2="+x2+" y2="+y2+" style='stroke:rgb(99,99,99);stroke-width:2' />"
// svgline.outerHTML="<line x1="+x1+" y1="+y1+" x2="+x2+" y2="+y2+" stroke=rgb(99,99,99) stroke-width="+count+" />";
//向左和向右旋轉的角度
var aL = a - Math.PI/4;
var aR = a + Math.PI/4;
if(count>0){
// 我這裏打少了一個變量rate，難怪沒有出來樹枝的變化
show(x2,y2,length*rate,rate,aL,count-1);
show(x2,y2,length*rate,rate,aR,count-1);
}
}
//調用遞歸二叉樹函數
show(x0,y0,length,rate,-Math.PI/2,count);
</script>
</body>
</html>
![]()
這幅圖的代碼應該是這樣的，只改變了向左和向右的旋轉角度，還有就是iter用來設置樹的顏色，但是不知道爲什麼我的電腦裏一直出不來這個圖。有沒有大佬能救命啊
<!DOCTYPE html>
<html>
<!--在標準二叉樹上爲線段添加隨機部分-->
<head>
<meta charset="UTF-8">
<title>角度隨機二叉樹</title>
</head>
<body>
<!-- svg元素-->
<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;
//設置變量mysvg獲取svg元素
var mysvg = document.getElementById("mySvg");
//修改SVG的寬度
mysvg.setAttribute("width",w*0.9);
//修改SVG的高度
mysvg.setAttribute("height",h*0.9);
//起始長度
var length = 200;
//衰減係數
var rate = 0.6;
//第一截線段的起點爲x0爲屏幕一般，y0爲屏幕底端
var x0 = w/2;
var y0 = h;
//迭代次數
var count = 7;
var iter = 0;
//定義遞歸二叉樹函數
/*根據起點(x1,y1)和終點(x2,y2繪製一個線段，長度爲length，然後將終點作爲起點，並對直線旋轉一個角度angle，把線段長度衰減一個係數rate，根據旋轉角度和衰減係數，新的終點(x2,y2)可以通過計算得到。*/
function show(x0,y0,length,rate,a,count){
//var iter++;這行代碼會使屏幕一片空白，更改爲下面的形式後纔有所顯示
var iter = iter + 1;
var x1 = x0;
var y1 = y0;
var x2 = x1+length*(0.5+0.5*Math.random())*Math.cos(a);
var y2 = y1+length*(0.5+0.5*Math.random())*Math.sin(a);
//創建線段svgline的節點document.createElement("line")，課本里沒有加上var。
svgline = document.createElement("line");
//mysvg的子節點爲svgline
mysvg.appendChild(svgline);
svgline.outerHTML="<line x1="+x1+" y1="+y1+" x2="+x2+" y2="+y2+" style='stroke:rgb(0,"(+iter+)",0);stroke-width:"(+count+)"' />"
var aL = a-Math.PI/4*(0.5+0.5*Math.random());
var aR = a-Math.PI/4*(0.5+0.5*Math.random());
if(count>0){
show(x2,y2,length*rate,rate,aL,count-1);
show(x2,y2,length*rate,rate,aR,count-1);
}
}
show(x0,y0,length,rate,-Math.PI/2,count);
</script>
</body>
</html>
