看到这个网页中在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

这篇本来发在我的博客上。