本文主要是介绍canvas实现一颗树的生长到开花，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
最近看了一些很牛逼的特效，有位大神用canvas绘制的 梦幻大树，深深的震撼了我，超级厉害，于是我也准备尝试着去实现，可能脑子不够用，总是无法实现他那样的梦幻效果，最终只好退而求其次，实现了下面的这种大树，还算满意吧。
效果图
HTML源码
<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>生长的树</title><style>html , body {margin: 0;padding: 0;width: 100%;height: 100%;overflow: hidden;background-color: #fff;}</style>
</head>
<body>
<canvas id="myCanvas">此浏览器不支持canvas</canvas>
<script src="../js/tree.js"></script>
</body>
</html>
tree.js 源码
/*** Created by 004928 on 2017/8/2.*/
(function (window) {var w = window.innerWidth , h = window.innerHeight ;var ctx = null ;var treeNum = 3 ;var initRadius = 25 ; // 树干的初始宽度var maxGeneration = 5 ; // 最多分支的次数var branchArray = null ; // 树干的集合var flowers = []; // 花的集合window.MyRequestAnimationFrame = window.requestAnimationFrame ||window.mozRequestAnimationFrame ||window.webkitRequestAnimationFrame ||window.msRequestAnimationFrame ;window.MyCancelRequestAnimationFrame = window.cancelRequestAnimationFrame ||window.mozCancelRequestAnimationFrame ||window.webkitCancelRequestAnimationFrame ||window.msCancelRequestAnimationFrame ;/*** 初始化canvas*/function initCanvas () {var canvas = document.getElementById("myCanvas");canvas.setAttribute('width' , w);canvas.setAttribute('height' , h);if(canvas.getContext) {ctx = canvas.getContext('2d');initTree();loop();}}/*** 初始化树的数量*/function initTree () {branchArray = new BranchArray ();for(var i = 0 ; i < treeNum ; i++) {branchArray.add(new Branch(w / 2 , h));}}/*** 树干* @param x* @param y* @constructor*/function Branch (x , y) {this.x = x ;this.y = y ;this.radius = initRadius ;this.angle = Math.PI / 2 ; // 树枝的初始角度this.speed = 2.35 ; // 数生长的速度this.generation = 1 ;}/*** 生长*/Branch.prototype.grow = function () {this.draw();this.update();}Branch.prototype.draw = function () {ctx.fillStyle = '#55220F';ctx.beginPath();ctx.arc(this.x , this.y , this.radius , 0 , 2 * Math.PI);ctx.fill();}/*** 更改数的高度以及扭曲度*/Branch.prototype.update = function () {// 计算树干每次的扭曲角度，因为树一般不是笔直生长的，都会有不规则的扭曲this.angle += random( -0.1 * this.generation / 2 , 0.1 * this.generation / 2 );var vx = this.speed * Math.cos(this.angle);// 因为初始角度设置为Math.PI , 所以vy要取负数var vy = - this.speed * Math.sin(this.angle);if(this.radius < 0.99 || this.generation > maxGeneration) {branchArray.remove(this);}this.x += vx ;this.y += vy ;this.radius *= 0.99 ;if(this.radius >= 0.9) {// 计算当前是第几代分支var g = (maxGeneration - 1) * initRadius / (initRadius - 1) / this.radius + (initRadius - maxGeneration) / (initRadius - 1) ;if( g > this.generation + 1) {this.generation = Math.floor(g) ;// 随机创建分支for(var i = 0 ; i < random(1,3) ; i++) {this.clone(this);}}}}/*** 创建分支* @param b*/Branch.prototype.clone = function (b) {var obj = new Branch(b.x , b.y);obj.angle = b.angle ;obj.radius = b.radius ;obj.speed = b.speed;obj.generation = b.generation;branchArray.add(obj);// 如果当前分支次数大于3则创建花，这样可以让花在树的顶端显示if( b.generation > 3 ) {flowers.push(new Flower(b.x , b.y));}}function BranchArray () {this.branchs = [];}/*** 添加树干到集合中* @param b*/BranchArray.prototype.add = function (b) {this.branchs.push(b);}/*** 从集合中移除树干* @param b*/BranchArray.prototype.remove = function (b) {if( this.branchs.length > 0) {var index = this.branchs.findIndex(function (item) {return b === item ;})if(index != -1) {this.branchs.splice(index , 1);}}}/*** 花* @param x* @param y* @constructor*/function Flower (x , y) {this.x = x ;this.y = y ;this.r = 1 ; // 花瓣的半径this.petals = 5 ; // 花瓣数量this.speed = 1.0235 ;// 花的绽放速度this.maxR = random(3 , 7); // 花的大小}/*** 花朵开放（通过改变花的半径实现开放的效果）* @param index*/Flower.prototype.update = function (index) {if(this.r == this.maxR) {flowers.splice(index , 1);return ;}this.r *= this.speed ;if(this.r > this.maxR) this.r = this.maxR ;}/*** 绘制花朵*/Flower.prototype.draw = function () {ctx.fillStyle = "#F3097B" ;for(var i = 1 ; i <= this.petals ; i++) {var x0 = this.x + this.r * Math.cos( Math.PI / 180 * (360 / this.petals) * i) ;var y0 = this.y + this.r * Math.sin( Math.PI / 180 * (360 / this.petals) * i) ;ctx.beginPath();ctx.arc(x0 , y0 , this.r , 0 , 2 * Math.PI) ;ctx.fill();}ctx.fillStyle = "#F56BC1";ctx.beginPath();ctx.arc(this.x , this.y , this.r / 2 , 0 , 2 * Math.PI) ;ctx.fill();}function random (min , max) {return Math.random() * (max - min) + min ;}/*** 循环遍历所有树干和花，并调用更新和draw方法，实现动画效果*/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);}window.onload = initCanvas;})(window)
原理
- 1.生长: 因为树是越往上树干越细，我们通过绘制圆，通过无数的圆叠加来当做树的躯体，逐渐缩小圆的半径，即可实现树越往上越小的效果
- 2.扭曲: 其次树的生长不是笔直的，是扭曲的，所以通过三角函数随机产生角度值，然后计算x,y轴的偏移量，这样就能实现树的扭曲
- 3.分支: 通过双曲线方程 y=-a/x + b 去控制什么树在什么时候去产生分支（待会详解）；
- 4.开花: 因为花一般都是长在末梢，而我则是显示在最后几个分支的结点以及末梢进行展示（这个开花地点随意，不必纠结）
生长
树的生长变细，主要通过改变树干的半径即可， this.radius = 0.99* 每次递减；
扭曲
关于树的扭曲，这个是重点，因为树枝延伸和扭曲都是不规则的，在 Branch.prototype.update 中
this.angle += random( -0.1 * this.generation / 2 , 0.1 * this.generation / 2 );
在区间[-0.1,0.1]中随机产生角度，通过三角函数计算x,y轴偏移量
var vx = this.speed * Math.cos(this.angle);
// 因为初始角度设置为Math.PI , 所以vy要取负数
var vy = - this.speed * Math.sin(this.angle);
vx的正负，决定了树的扭曲，vy的正负，决定树是向上生长还是向下
你可能觉得奇怪树为什么会向下生长，首先要理解我们这里将树抽象成了一个一个的圆
无数个圆连接在一起才组成树干，这个要能理解，然后，有些树的枝干有时是会往下生长一段，然后又往上生长的
这个生长的方向我们是不能控制的，并不是所有树都一直向上生长的，所以当vy为负值时就可以实现树枝
向下生长的情况，当然这个也是随机的，也正是我们想要的效果。
分支
对于在什么时候应该让树去产生分支，我之前的想法是规定一段树干的长度，然后每次计算当前位置
距离上一个分支点的距离是否大于我规定的长度，然后产生分支，但是这样就会看到每节分支之间的长度是一样的
看起来不美观，比较死板，最终使用双曲线方程 y=-1/x 去控制因为双曲线的走势是先快后慢的，
而树的生长也是越往后分支越多,可能你会奇怪曲线是先快后慢，树分叉是先慢后快的，不符合逻辑啊
别着急，下看下图:
从图中可以看见，X轴表示树干的粗细，Y轴表示分支的次数，当树干越来越细的时候，X轴变小
是不是Y轴就越来越大，且是先慢后快，这样就符合我们的需求了。
因此上面计算分支的次数公式就由此而来：
var g = (maxGeneration - 1) * initRadius / (initRadius - 1) / this.radius + (initRadius - maxGeneration) / (initRadius - 1) ;
得到分支次数，比较是否大于当前分支，于是便随即产生分支数量，详见 Branch.prototype.clone 也就是创建一个树干添加到BranchArray中
开花
至于开花的逻辑就比较简单，主要记录花朵开放的位置，然后绘制出来便可，至于花朵的形状，详见 Flower.prototype.draw 方法
这里我就不做过多介绍了，比较简单，而花朵的开放效果，就是改变花朵的半径
一颗大树从生长到开花所有的逻辑步骤大概这四步，其中最主要的逻辑是扭曲，为了这个扭曲我想了好多天，苦闷死我了。
最后通过循环调用 loop 方法， 遍历所有树干以及花朵，即可实现动态效果。
Github 源码下载
这篇关于canvas实现一颗树的生长到开花的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
