摘要：看到這個(gè)網(wǎng)頁(yè)中在里繪制一棵樹(shù)，感到很有趣，于是仿照他的源代碼，同樣也利用生成了一棵樹(shù)。在程序中需要兩個(gè)對(duì)象。中存放當(dāng)前正在繪制的這一段樹(shù)枝的信息，中存放的是所有的樹(shù)枝。對(duì)集合內(nèi)的每個(gè)元素依次進(jìn)行處理這樣我們就完成了在上繪制一棵樹(shù)的工作。

看到這個(gè)網(wǎng)頁(yè)中在canvas里繪制一棵樹(shù)，感到很有趣，于是仿照他的源代碼，同樣也利用JavaScript生成了一棵樹(shù)。

在程序中需要兩個(gè)對(duì)象Branch, BranchCollection。Branch中存放當(dāng)前正在繪制的這一段樹(shù)枝的信息，BranchCollection中存放的是所有的樹(shù)枝。

首先對(duì)canvas畫(huà)布進(jìn)行初始設(shè)置：

var width = window.innerWidth;
var height = window.innerHeight;
var canvas = document.getElementById("canvastree");
canvas.width = width;
canvas.height = height;

對(duì)初始的branch的數(shù)量、半徑進(jìn)行設(shè)置：

// 設(shè)置初始的數(shù)量
var n = 2 + Math.random() * 3;
// 設(shè)定初始的半徑大小
var initialRadius = width / 50;

新建一個(gè)BranchCollection對(duì)象用于放置所有的branch：

branches = new BranchCollection();

這里的BranchCollection對(duì)象有如下的幾個(gè)方法：

add()：加入一個(gè)新元素

remove()：刪除一個(gè)元素

process()：對(duì)集合內(nèi)的每一個(gè)元素，依次調(diào)用這個(gè)元素自己的處理方法

對(duì)于創(chuàng)建的BranchCollection對(duì)象，將初始的branch依次加入其中，并初始化。

for (var i = 0; i < n; i++) {
    branch = new Branch();
    // 以canvas的中點(diǎn)為基準(zhǔn)，左右各占一個(gè)initialRadius的寬度
    // 根據(jù)序號(hào)i算出初始x坐標(biāo)
    branch.x = width/2 - initialRadius + i * 2 * initialRadius / n;
    branch.radius = initialRadius;

    // 將新的branch加入集合中去
    branches.add(branch);
}

Branch對(duì)象有這些屬性：

x,y：坐標(biāo)值

radius：每一條顯示在屏幕上的樹(shù)枝實(shí)際上都是由半徑逐漸減小的圓形組合而成的，radius就是圓形的半徑

angle：樹(shù)枝從底部向上延伸時(shí)的角度，初始值是PI/2

speed：一個(gè)參數(shù)，用于控制樹(shù)枝延伸時(shí)的速度

generation：當(dāng)前的樹(shù)枝是第幾代，當(dāng)出現(xiàn)分叉時(shí)，generation會(huì)加一

distance：當(dāng)前的這一段樹(shù)枝的長(zhǎng)度，用于控制分叉的概率

fillStyle, shadowColor, shadowBlur：繪圖參數(shù)

Branch對(duì)象的方法有：

precess()：主要的處理部分，調(diào)用其它幾個(gè)方法

draw()：在當(dāng)前的坐標(biāo)處畫(huà)出一個(gè)圓形

iterate()：將branch向上延伸，更新坐標(biāo)值，減小半徑，給angle增加一個(gè)隨機(jī)值

split()：根據(jù)distance值判斷當(dāng)前是否可以分叉，如果可以則新建若干個(gè)Branch對(duì)象加入集合，并刪除當(dāng)前的父代對(duì)象

die()：判斷是否需要?jiǎng)h除當(dāng)前對(duì)象

最后通過(guò)setInterval()函數(shù)來(lái)生成圖像，每隔一個(gè)時(shí)間間隔對(duì)所有branch進(jìn)行一次遍歷處理，畫(huà)出圖形，更新坐標(biāo)，生成子代等。

var interval = setInterval(function() {
    // 對(duì)集合內(nèi)的每個(gè)元素依次進(jìn)行處理
    branches.process();
    if (branches.branches.length == 0) {
        clearInterval(interval);
    }
}, 20);

這樣我們就完成了在canvas上繪制一棵樹(shù)的工作。

GitHub代碼地址

這里是我的一個(gè)在線的 demo

這篇原來(lái)發(fā)在我的博客上。