利用JavaScript在canvas中畫一棵樹

jopen 8年前發布 | 17K 次閱讀 JavaScript開發 JavaScript

看到這個網頁中在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上繪制一棵樹的工作。