参考链接：https://blog.csdn.net/u010298576/article/details/76609244
HTML网页源码：
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>生长的树</title>
6 <style>
7 html , body {
8 margin: 0;
9 padding: 0;
10 width: 100%;
11 height: 100%;
12 overflow: hidden;
13 background-color: #fff;
14 }
15 </style>
16 </head>
17 <body>
18 <canvas id="myCanvas">此浏览器不支持canvas</canvas>
19 <script src="tree.js"></script>
20 </body>
21 </html>
js代码：
1 /**
2 * Created by 004928 on 2017/8/2.
3 */
4 (function (window) {
5
6 var w = window.innerWidth , h = window.innerHeight ; // innerheight 返回窗口的文档显示区的高度。 innerwidth 返回窗口的文档显示区的宽度。
7 var ctx = null ;
8 var treeNum = 5 ;
9 var initRadius = 25 ; // 树干的初始宽度
10 var maxGeneration = 5 ; // 最多分支的次数
11 var branchArray = null ; // 树干的集合
12 var flowers = []; // 花的集合
13
14 window.MyRequestAnimationFrame = window.requestAnimationFrame || //requestAnimationFrame的速度是由浏览器决定的，不同浏览器会自行决定最佳的帧效率。
15 window.mozRequestAnimationFrame || //解决了浏览器不知道javascript动画什么时候开始、不知道最佳循环间隔时间的问题。
16 window.webkitRequestAnimationFrame || //这个API是浏览器提供的js全局方法，针对动画效果。
17 window.msRequestAnimationFrame ;
18
19 window.MyCancelRequestAnimationFrame = window.cancelRequestAnimationFrame || //这是是把动画结束的
20 window.mozCancelRequestAnimationFrame ||
21 window.webkitCancelRequestAnimationFrame ||
22 window.msCancelRequestAnimationFrame ;
23
24 /**
25 * 初始化canvas
26 */
27 function initCanvas () {
28 var canvas = document.getElementById("myCanvas");
29 canvas.setAttribute('width' , w);
30 canvas.setAttribute('height' , h);
31 if(canvas.getContext) { //getContext() 方法返回一个用于在画布上绘图的环境。目前参数唯一的合法值是 "2d"，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API。
32 ctx = canvas.getContext('2d');
33 initTree();
34 loop();
35 }
36 }
37
38 /**
39 * 初始化树的数量
40 */
41 function initTree () {
42 branchArray = new BranchArray ();
43 for(var i = 0 ; i < treeNum ; i++) {
44 branchArray.add(new Branch(w / 2 , h));
45 }
46 }
47
48 function BranchArray () { //如果没有手动返回对象，则默认返回this指向的这个对象，也是隐性的
49 this.branchs = []; //具体见https://www.cnblogs.com/echolun/p/10903290.html
50 }
51
52 /**
53 * 树干
54 * @param x
55 * @param y
56 * @constructor
57 */
58 function Branch (x , y) {
59 this.x = x ;
60 this.y = y ;
61 this.radius = initRadius ;
62 this.angle = Math.PI / 2 ; // 树枝的初始角度
63 this.speed = 2.35 ; // 树生长的速度
64 this.generation = 1 ;
65 }
66
67 /**
68 * 生长
69 */
70 Branch.prototype.grow = function () {
71 this.draw();
72 this.update();
73 }
74
75 Branch.prototype.draw = function () {
76 ctx.fillStyle = '#55220F';
77 ctx.beginPath();
78 ctx.arc(this.x , this.y , this.radius , 0 , 2 * Math.PI);
79 ctx.fill();
80 }
81
82 /**
83 * 更改数的高度以及扭曲度
84 */
85 Branch.prototype.update = function () {
86
87 // 计算树干每次的扭曲角度，因为树一般不是笔直生长的，都会有不规则的扭曲
88 this.angle += random( -0.1 * this.generation , 0.1 * this.generation ); //因为树枝半径小的话那么它分支的角度可能会更大
89
90 var vx = this.speed * Math.cos(this.angle); //speed就表示这个树枝的生长长度
91 // 因为初始角度设置为Math.PI , 所以vy要取负数
92 var vy = - this.speed * Math.sin(this.angle);
93
94 if(this.radius < 0.99 || this.generation > maxGeneration) {
95 branchArray.remove(this);
96 }
97
98 this.x += vx ;
99 this.y += vy ;
100
101 this.radius *= 0.99 ;
102
103 if(this.radius >= 0.9) {
104 // 计算当前是第几代分支
105 var g = (maxGeneration - 1) * initRadius / (initRadius - 1) / this.radius + (initRadius - maxGeneration) / (initRadius - 1) ;
106 if( g > this.generation + 1) {
107 this.generation = Math.floor(g) ; //这个应该是把g向下取整
108 // 随机创建分支
109 for(var i = 0 ; i < random(1,3) ; i++) {
110 this.clone(this);
111 }
112 }
113 }
114
115 }
116
117 /**
118 * 创建分支
119 * @param b
120 */
121 Branch.prototype.clone = function (b) {
122 var obj = new Branch(b.x , b.y); //定义一个对象
123 obj.angle = b.angle ;
124 obj.radius = b.radius ;
125 obj.speed = b.speed;
126 obj.generation = b.generation;
127 branchArray.add(obj);
128 // 如果当前分支次数大于3则创建花，这样可以让花在树的顶端显示
129 if( b.generation > 3 ) {
130 flowers.push(new Flower(b.x , b.y));
131 }
132 }
133
134 /**
135 * 添加树干到集合中
136 * @param b
137 */
138 BranchArray.prototype.add = function (b) {
139 this.branchs.push(b);
140 }
141 /**
142 * 从集合中移除树干
143 * @param b
144 */
145 BranchArray.prototype.remove = function (b) {
146 if( this.branchs.length > 0) {
147 var index = this.branchs.findIndex(function (item) {
148 return b === item ;
149 })
150 if(index != -1) {
151 this.branchs.splice(index , 1);
152 }
153 }
154 }
155
156 /**
157 * 花
158 * @param x
159 * @param y
160 * @constructor
161 */
162 function Flower (x , y) {
163 this.x = x ;
164 this.y = y ;
165 this.r = 1 ; // 花瓣的半径
166 this.petals = 5 ; // 花瓣数量
167 this.speed = 1.0235 ;// 花的绽放速度
168 this.maxR = random(3 , 7); // 花的大小
169 }
170
171 /**
172 * 花朵开放（通过改变花的半径实现开放的效果）
173 * @param index
174 */
175 Flower.prototype.update = function (index) {
176 if(this.r == this.maxR) {
177 flowers.splice(index , 1);
178 return ;
179 }
180 this.r *= this.speed ;
181 if(this.r > this.maxR) this.r = this.maxR ;
182 }
183
184 /**
185 * 绘制花朵
186 */
187 Flower.prototype.draw = function () {
188 ctx.fillStyle = "#F3097B" ;
189 for(var i = 1 ; i <= this.petals ; i++) {
190 var x0 = this.x + this.r * Math.cos( Math.PI / 180 * (360 / this.petals) * i) ;
191 var y0 = this.y + this.r * Math.sin( Math.PI / 180 * (360 / this.petals) * i) ;
192 ctx.beginPath();
193 ctx.arc(x0 , y0 , this.r , 0 , 2 * Math.PI) ;
194 ctx.fill();
195 }
196 ctx.fillStyle = "#F56BC1";
197 ctx.beginPath();
198 ctx.arc(this.x , this.y , this.r / 2 , 0 , 2 * Math.PI) ;
199 ctx.fill();
200 }
201
202 function random (min , max) {
203 return Math.random() * (max - min) + min ;
204 }
205
206 /**
207 * 循环遍历所有树干和花，并调用更新和draw方法，实现动画效果
208 */
209 function loop () {
210 for(var i = 0 ; i < branchArray.branchs.length ; i ++) {
211 var b = branchArray.branchs[i];
212 b.grow();
213 }
214 var len = flowers.length ;
215 while (len --) {
216 flowers[len].draw();
217 flowers[len].update();
218 }
219 MyRequestAnimationFrame(loop);
220 }
221
222 window.onload = initCanvas;
223
224 })(window)
HTML 5 Canvas 参考手册：https://www.w3school.com.cn/tags/html_ref_canvas.asp
1、树是由一个一个实心圆来构成的
test网页HTML源码：
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title>生长的树</title>
6 <style>
7 html , body {
8 margin: 0;
9 padding: 0;
10 width: 100%;
11 height: 100%;
12 overflow: hidden;
13 background-color: #fff;
14 }
15 </style>
16 </head>
17 <body>
18 <canvas id="myCanvas">此浏览器不支持canvas</canvas>
19 <script>
20 (function (window) {
21 var ctx=null;
22 var w = window.innerWidth , h = window.innerHeight ;
23 var canvas = document.getElementById("myCanvas");
24 canvas.setAttribute('width' , w);
25 canvas.setAttribute('height' , h);
26 if(canvas.getContext) { //getContext() 方法返回一个用于在画布上绘图的环境。目前参数唯一的合法值是 "2d"，它指定了二维绘图，并且导致这个方法返回一个环境对象，该对象导出一个二维绘图 API。
27 ctx = canvas.getContext('2d');
28 ctx.fillStyle = '#55220F';
29 ctx.beginPath();
30 ctx.arc(100 ,90 , 25 , 0 , 2 * Math.PI);
31 ctx.fill(); //用所选颜色将圆染色
32
33 ctx.fillStyle = '#55220F';
34 ctx.beginPath();
35 ctx.arc(100 ,80 , 25 , 0 , 2 * Math.PI);
36 ctx.fill();
37
38 ctx.fillStyle = '#55220F';
39 ctx.beginPath();
40 ctx.arc(100 ,70 , 25 , 0 , 2 * Math.PI);
41 ctx.fill();
42 }
43
44 })(window)
45 </script>
46 </body>
47 </html>
你会发现三个圆可以构成一个树的树干（前提是圆与圆之间的距离不能太大。很好理解，距离太大他们重合部分就会小，就看起来不像树干了）
2、树的扭曲
this.angle += random( -0.1 * this.generation , 0.1 * this.generation ); //因为树枝半径小的话那么它分支的角度可能会更大
树的生长方向是通过角度angle来控制的，在区间[-0.1,0.1]中随机产生角度，然后通过三角函数计算x,y轴偏移量，之后就在坐标(x,y)位置画圆
因为this.generation 的大小是和圆的半径相关（关系在下面），那么半径小的时候this.generation就会大，那么也就是
“
树枝半径小的话那么它分支的角度可能会更大
”
3、树的分支
对于在什么时候应该让树去产生分支，我之前的想法是规定一段树干的长度，然后每次计算当前位置
距离上一个分支点的距离是否大于我规定的长度，然后产生分支，但是这样就会看到每节分支之间的长度是一样的
看起来不美观，比较死板，最终使用双曲线方程 y=-1/x 去控制因为双曲线的走势是先快后慢的，
而树的生长也是越往后分支越多,可能你会奇怪曲线是先快后慢，树分叉是先慢后快的，不符合逻辑啊
别着急，下看下图:
从图中可以看见，X轴表示树干的粗细，Y轴表示分支的次数，当树干越来越细的时候，X轴变小
是不是Y轴就越来越大，且是先慢后快，这样就符合我们的需求了。
又因为我们不能让它无条件产生分支，所以我们需要加一个条件限制，因为如果无条件分支，那么这棵树的分支集合里面的分支对象会越来越多，永远也执行不完，就会死循环。
我们控制分支最大数量为maxGeneration
var g = (maxGeneration - 1) * initRadius / (initRadius - 1) / this.radius + (initRadius - maxGeneration) / (initRadius - 1) ;
4、花的开放
它是通过判断分支个数来决定什么时间开花，比如分支大于3就开花。花的属性具体看代码
5、程序整体运行
function loop () {
for(var i = 0 ; i < branchArray.branchs.length ; i ++) {
var b = branchArray.branchs[i];
b.grow();
}
var len = flowers.length ;
while (len --) {
flowers[len].draw();
flowers[len].update();
}
MyRequestAnimationFrame(loop);
}
由程序我们知道，每当一个branch执行grow函数的时候，它执行过后，里面的属性可能会发生改变，然后它有被放入branchArray里面以待下次执行
因为我们不停的往branchArray里面放树枝（即，branch），那么又因为只有分支个数大于某个值才会移除这个树枝。所以它是先把所有树枝长出来之后才开花
所以loop这个函数只执行了一次
