如何使用HTML5Canvas遞歸畫樹

這期內(nèi)容當中小編將會給大家?guī)碛嘘P(guān)如何使用HTML 5 Canvas遞歸畫樹，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：域名與空間、網(wǎng)頁空間、營銷軟件、網(wǎng)站建設(shè)、定結(jié)網(wǎng)站維護、網(wǎng)站推廣。

如何使用HTML 5 Canvas遞歸畫樹

上圖就是用html5隨機生成的大樹 : ) 但是你應(yīng)該沒想到40+行代碼就可以搞定了吧~接下來就跟大家說說這棵大樹是如何實現(xiàn)的。

同樣必須要有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);

代碼很好理解，創(chuàng)建一個canvas畫布，然后選擇為2d畫布，設(shè)置長寬，***將這個畫布添加到body標簽下。

這個腳本最重要的函數(shù)在下面，大樹就是遞歸調(diào)用這個函數(shù)實現(xiàn)的，調(diào)用一次畫一條線段:

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(可自己設(shè)定);branchWidth就線段的粗細。有了這些信息，其實就描述了一個線段，通過這些信息我們才能畫一個線段。

接下來又很可恥地一大段定義:

var rand = Math.random,  newLength, newAngle, newDepth, maxBranch = 3,  endX, endY, maxAngle = 2 * Math.PI / 4,  subBraches;

rand其實就是隨機一個0~1之間的實數(shù)，顧名思義，接下來這些new的就是下一節(jié)線段的各種參數(shù)。maxBranch就是最多有3個分叉，***的角度 PI/2 即為，下一級調(diào)整角度在90%范圍內(nèi)。subBranches就是分叉的個數(shù)。

好了，重要可以畫了:

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，有點像高中學(xué)的參數(shù)方程。然后告訴瀏覽器，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)';  }

如果是已經(jīng)畫到了***兩級，即為葉子，那么就rgb就為(0, 128~192, 0)(rgb代表顏色，分別為紅綠藍，red green blue)。還沒的話，就在(64~128, 50 ,25)中取。大家可能發(fā)現(xiàn)了，rgb必須為整數(shù)，但是rand()只能rand實數(shù)。大家其實也注意到了有個” >> 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);  }

分叉數(shù)是1~3中的一個數(shù)。然后有多少個分叉，就畫幾條線段,newAngle為原角度調(diào)整90度之內(nèi)，新長度為原長度的0.7~1.0之間。

***畫出主干，這棵樹就可以開始畫了。

drawTree(ctx, 320, 470, 60, -Math.PI / 2, 12, 12);

大家可能注意到角度為負，不符合傳統(tǒng)觀念。但你要知道，畫布的縱坐標和傳統(tǒng)的坐標軸正好是相反的。

剩下可以發(fā)揮的東西還很多，比如大家可以調(diào)整各種參數(shù)，使樹的顏色、大小變化，或者用這種方法去做些其他的事~

上述就是小編為大家分享的如何使用HTML 5 Canvas遞歸畫樹了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

名稱欄目：如何使用HTML5Canvas遞歸畫樹
分享地址：http://muchs.cn/article46/gphghg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供商城網(wǎng)站、面包屑導(dǎo)航、軟件開發(fā)、網(wǎng)站制作、網(wǎng)站策劃、建站公司

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容