利用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

---

这篇原来发在个人博客上。