利用JavaScript在canvas中畫一棵樹

看到這個網頁中在canvas裏繪製一棵樹，感到頗有趣，因而仿照他的源代碼，一樣也利用JavaScript生成了一棵樹。

在程序中須要兩個對象Branch, BranchCollection。Branch中存放當前正在繪製的這一段樹枝的信息，BranchCollection中存放的是全部的樹枝。

首先對canvas畫布進行初始設置：

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

對初始的branch的數量、半徑進行設置：

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

新建一個BranchCollection對象用於放置全部的branch：

branches = new BranchCollection();

這裏的BranchCollection對象有以下的幾個方法：

• add()：加入一個新元素

• remove()：刪除一個元素

• process()：對集合內的每個元素，依次調用這個元素本身的處理方法

對於建立的BranchCollection對象，將初始的branch依次加入其中，並初始化。

for (var i = 0; i < n; i++) {
    branch = new Branch();
    // 以canvas的中點爲基準，左右各佔一個initialRadius的寬度
    // 根據序號i算出初始x座標
    branch.x = width/2 - initialRadius + i * 2 * initialRadius / n;
    branch.radius = initialRadius;

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

Branch對象有這些屬性：

• x,y：座標值

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

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

• speed：一個參數，用於控制樹枝延伸時的速度

• generation：當前的樹枝是第幾代，當出現分叉時，generation會加一

• distance：當前的這一段樹枝的長度，用於控制分叉的機率

• fillStyle, shadowColor, shadowBlur：繪圖參數

Branch對象的方法有：

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

• draw()：在當前的座標處畫出一個圓形

• iterate()：將branch向上延伸，更新座標值，減少半徑，給angle增長一個隨機值

• split()：根據distance值判斷當前是否能夠分叉，若是能夠則新建若干個Branch對象加入集合，並刪除當前的父代對象

• die()：判斷是否須要刪除當前對象

最後經過setInterval()函數來生成圖像，每隔一個時間間隔對全部branch進行一次遍歷處理，畫出圖形，更新座標，生成子代等。

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

這樣咱們就完成了在canvas上繪製一棵樹的工做。

GitHub代碼地址

這裏是個人一個在線的 demo

---

這篇原來發在個人博客上。