HTML 5 Canvas 遞歸畫樹
上圖就是用html5隨機生成的大樹 : ) 但是你應該沒想到40+行代碼就可以搞定了吧~接下來就跟大家說說這棵大樹是如何實現的。
同樣必須要有html容器。新建Index.html，代碼如下:
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
- <title>canvas tree</title>
- </head>
- <body>
- <script type="text/javascript" src="tree.js"></script>
- </body>
- </html>
接下來咱們開始tree.js:
- var canvas = document.createElement("canvas");
- var ctx = canvas.getContext("2d");
- canvas.width = 640;
- canvas.height = 480;
- document.body.appendChild(canvas);
代碼很好理解，創建一個canvas畫布，然后選擇為2d畫布，設置長寬，***將這個畫布添加到body標簽下。
這個腳本最重要的函數在下面，大樹就是遞歸調用這個函數實現的，調用一次畫一條線段:
- var drawTree = function (ctx, startX, startY, length, angle, depth, branchWidth){
- var rand = Math.random,
- newLength, newAngle, newDepth, maxBranch = 3,
- endX, endY, maxAngle = 2 * Math.PI / 4,
- subBraches;
- ctx.beginPath();
- ctx.moveTo(startX, startY);
- endX = startX + length * Math.cos(angle);
- endY = startY + length * Math.sin(angle);
- ctx.lineCap = 'round';
- ctx.lineWidth = branchWidth;
- ctx.lineTo(endX, endY);
- if (depth <= 2){
- ctx.strokeStyle = 'rgb(0,' + (((rand() * 64) + 128) >> 0) + ',0)';
- } else {
- ctx.strokeStyle = 'rgb(' + (((rand() * 64) + 64) >> 0) + ',50,25)';
- }
- ctx.stroke();
- newDepth = depth - 1;
- if (!newDepth)
- return;
- subBranches = (rand() * (maxBranch - 1)) + 1;
- branchWidth *= 0.7;
- for (var i = 0; i < subBranches; i++){
- newAngle = angle + rand() * maxAngle - maxAngle * 0.5;
- newLength = length * (0.7 + rand() * 0.3);
- drawTree(ctx, endX, endY, newLength, newAngle, newDepth, branchWidth);
- }
- }
接下來一點點解釋:
首先，解釋下各個變量的含義。ctx就是前面我們的2d畫布;startX是線段開始的橫坐標，同理startY是縱坐標;length是線段長度;angle是角度;depth是深度，葉子深度為1，樹干為12(可自己設定);branchWidth就線段的粗細。有了這些信息，其實就描述了一個線段，通過這些信息我們才能畫一個線段。
接下來又很可恥地一大段定義:
- var rand = Math.random,
- newLength, newAngle, newDepth, maxBranch = 3,
- endX, endY, maxAngle = 2 * Math.PI / 4,
- subBraches;
rand其實就是隨機一個0~1之間的實數，顧名思義，接下來這些new的就是下一節線段的各種參數。maxBranch就是最多有3個分叉，***的角度 PI/2 即為，下一級調整角度在90%范圍內。subBranches就是分叉的個數。
好了，重要可以畫了:
- ctx.beginPath();
- ctx.moveTo(startX, startY);
- endX = startX + length * Math.cos(angle);
- endY = startY + length * Math.sin(angle);
- ctx.lineCap = 'round';
- ctx.lineWidth = branchWidth;
- ctx.lineTo(endX, endY);
beginPath()表示告訴瀏覽器“我要開始畫了！”，把之前的記錄放棄了，這點有點像ps。moveTo()把光標移動到(startX, startY)，再計算終點坐標，endX,endY，有點像高中學的參數方程。然后告訴瀏覽器，lineCap要round,線段的兩頭要是圓形的。有多粗呢？等于branchWidth。線段一直畫到(endX, endY)。
- if (depth <= 2){
- ctx.strokeStyle = 'rgb(0,' + (((rand() * 64) + 128) >> 0) + ',0)';
- } else {
- ctx.strokeStyle = 'rgb(' + (((rand() * 64) + 64) >> 0) + ',50,25)';
- }
如果是已經畫到了***兩級，即為葉子，那么就rgb就為(0, 128~192, 0)(rgb代表顏色，分別為紅綠藍，red green blue)。還沒的話，就在(64~128, 50 ,25)中取。大家可能發現了，rgb必須為整數，但是rand()只能rand實數。大家其實也注意到了有個” >> 0″，js當中表示位運算，整體向右移動n位，0就是移動0位。其實它的作用和Math.floor()一樣，但是速度更快。
動手畫!
- ctx.stroke();
這個線段就畫好了，是時候準備下它的分叉的時候了。
- newDepth = depth - 1;
- if (!newDepth)
- return;
如果這個線段是***一級，就沒有分叉了，也是一個遞歸的終止條件。
- subBranches = (rand() * (maxBranch - 1)) + 1;
- branchWidth *= 0.7;
- for (var i = 0; i < subBranches; i++){
- newAngle = angle + rand() * maxAngle - maxAngle * 0.5;
- newLength = length * (0.7 + rand() * 0.3);
- drawTree(ctx, endX, endY, newLength, newAngle, newDepth, branchWidth);
- }
分叉數是1~3中的一個數。然后有多少個分叉，就畫幾條線段,newAngle為原角度調整90度之內，新長度為原長度的0.7~1.0之間。
***畫出主干，這棵樹就可以開始畫了。
- drawTree(ctx, 320, 470, 60, -Math.PI / 2, 12, 12);
大家可能注意到角度為負，不符合傳統觀念。但你要知道，畫布的縱坐標和傳統的坐標軸正好是相反的。
剩下可以發揮的東西還很多，比如大家可以調整各種參數，使樹的顏色、大小變化，或者用這種方法去做些其他的事~
打完收工~附上文件:tree.zip
