日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
HTML 5 Canvas 遞歸畫樹

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

創(chuàng)新互聯(lián)建站服務項目包括翼城網(wǎng)站建設(shè)、翼城網(wǎng)站制作、翼城網(wǎng)頁制作以及翼城網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，翼城網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務的客戶以成都為中心已經(jīng)輻射到翼城省份的部分城市，未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任！

同樣必須要有html容器。新建Index.html，代碼如下:

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4. canvas tree 
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9.  
    10.

接下來咱們開始tree.js:

 
 
 
 
      
  
  
  
  1. var canvas = document.createElement("canvas");  
    2.   
  
  
  
  2. var ctx = canvas.getContext("2d");  
    3.   
  
  
  
  3. canvas.width = 640;  
    4.   
  
  
  
  4. canvas.height = 480;  
    5.   
  
  
  
  5. document.body.appendChild(canvas); 
    6.

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

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

 
 
 
 
      
  
  
  
  1. var drawTree = function (ctx, startX, startY, length, angle, depth, branchWidth){  
    2.   
  
  
  
  2. var rand = Math.random,  
    3.   
  
  
  
  3. newLength, newAngle, newDepth, maxBranch = 3,  
    4.   
  
  
  
  4. endX, endY, maxAngle = 2 * Math.PI / 4,  
    5.   
  
  
  
  5. subBraches;  
    6.   
  
  
  
  6. ctx.beginPath();  
    7.   
  
  
  
  7. ctx.moveTo(startX, startY);  
    8.   
  
  
  
  8. endX = startX + length * Math.cos(angle);  
    9.   
  
  
  
  9. endY = startY + length * Math.sin(angle);  
    10.   
  
  
  
  10. ctx.lineCap = 'round';  
    11.   
  
  
  
  11. ctx.lineWidth = branchWidth;  
    12.   
  
  
  
  12. ctx.lineTo(endX, endY);  
    13.   
  
  
  
  13. if (depth <= 2){  
    14.   
  
  
  
  14. ctx.strokeStyle = 'rgb(0,' + (((rand() * 64) + 128) >> 0) + ',0)';  
    15.   
  
  
  
  15. } else {  
    16.   
  
  
  
  16. ctx.strokeStyle = 'rgb(' + (((rand() * 64) + 64) >> 0) + ',50,25)';  
    17.   
  
  
  
  17. }  
    18.   
  
  
  
  18. ctx.stroke();  
    19.   
  
  
  
  19. newDepth = depth - 1;  
    20.   
  
  
  
  20. if (!newDepth)  
    21.   
  
  
  
  21. return;  
    22.   
  
  
  
  22. subBranches = (rand() * (maxBranch - 1)) + 1;  
    23.   
  
  
  
  23. branchWidth *= 0.7;  
    24.   
  
  
  
  24. for (var i = 0; i < subBranches; i++){  
    25.   
  
  
  
  25. newAngle = angle + rand() * maxAngle - maxAngle * 0.5;  
    26.   
  
  
  
  26. newLength = length * (0.7 + rand() * 0.3);  
    27.   
  
  
  
  27. drawTree(ctx, endX, endY, newLength, newAngle, newDepth, branchWidth);  
    28.   
  
  
  
  28. }  
    29.   
  
  
  
  29. } 
    30.

接下來一點點解釋:

首先，解釋下各個變量的含義。ctx就是前面我們的2d畫布;startX是線段開始的橫坐標，同理startY是縱坐標;length是線段長度;angle是角度;depth是深度，葉子深度為1，樹干為12(可自己設(shè)定);branchWidth就線段的粗細。有了這些信息，其實就描述了一個線段，通過這些信息我們才能畫一個線段。

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

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

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

好了，重要可以畫了:

 
 
 
 
      
  
  
  
  1. ctx.beginPath();  
    2.   
  
  
  
  2. ctx.moveTo(startX, startY);  
    3.   
  
  
  
  3. endX = startX + length * Math.cos(angle);  
    4.   
  
  
  
  4. endY = startY + length * Math.sin(angle);  
    5.   
  
  
  
  5. ctx.lineCap = 'round';  
    6.   
  
  
  
  6. ctx.lineWidth = branchWidth;  
    7.   
  
  
  
  7. ctx.lineTo(endX, endY); 
    8.

beginPath()表示告訴瀏覽器“我要開始畫了！”，把之前的記錄放棄了，這點有點像ps。moveTo()把光標移動到(startX, startY)，再計算終點坐標，endX,endY，有點像高中學的參數(shù)方程。然后告訴瀏覽器，lineCap要round,線段的兩頭要是圓形的。有多粗呢？等于branchWidth。線段一直畫到(endX, endY)。

 
 
 
 
      
  
  
  
  1. if (depth <= 2){  
    2.   
  
  
  
  2. ctx.strokeStyle = 'rgb(0,' + (((rand() * 64) + 128) >> 0) + ',0)';  
    3.   
  
  
  
  3. } else {  
    4.   
  
  
  
  4. ctx.strokeStyle = 'rgb(' + (((rand() * 64) + 64) >> 0) + ',50,25)';  
    5.   
  
  
  
  5. } 
    6.

如果是已經(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()一樣，但是速度更快。

動手畫!

 
 
 
 
      
  
  
  
  1. ctx.stroke(); 
    2.

這個線段就畫好了，是時候準備下它的分叉的時候了。

 
 
 
 
      
  
  
  
  1. newDepth = depth - 1;  
    2.   
  
  
  
  2. if (!newDepth)  
    3.   
  
  
  
  3. return; 
    4.

如果這個線段是***一級，就沒有分叉了，也是一個遞歸的終止條件。

 
 
 
 
      
  
  
  
  1. subBranches = (rand() * (maxBranch - 1)) + 1;  
    2.   
  
  
  
  2. branchWidth *= 0.7;  
    3.   
  
  
  
  3. for (var i = 0; i < subBranches; i++){  
    4.   
  
  
  
  4. newAngle = angle + rand() * maxAngle - maxAngle * 0.5;  
    5.   
  
  
  
  5. newLength = length * (0.7 + rand() * 0.3);  
    6.   
  
  
  
  6. drawTree(ctx, endX, endY, newLength, newAngle, newDepth, branchWidth);  
    7.   
  
  
  
  7. } 
    8.

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

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

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

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

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

打完收工~附上文件:tree.zip


分享題目：HTML 5 Canvas 遞歸畫樹
當前網(wǎng)址：http://www.5511xx.com/article/dhjhjdc.html