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

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

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

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

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

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

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

新建一個BranchCollection對象用于放置所有的branch：

branches = new BranchCollection();

這里的BranchCollection對象有如下的幾個方法：

add()：加入一個新元素

remove()：刪除一個元素

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

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

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

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

Branch對象有這些屬性：

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

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

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

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

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

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

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

Branch對象的方法有：

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

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

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

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

die()：判斷是否需要刪除當(dāng)前對象

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

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

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

GitHub代碼地址

這里是我的一個在線的 demo

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