上圖就是用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
原文連結：http://billyellow.com/?p=20
【編輯推薦】
【責任編輯：
張偉TEL：（010）68476606】