canvas实现一颗树的生长到开花
2017-08-03 10:20
295 查看
最近看了一些很牛逼的特效，有位大神用canvas绘制的 梦幻大树，深深的震撼了我，超级厉害，于是我也准备尝试着去实现，可能脑子不够用，总是无法实现他那样的梦幻效果，最终只好退而求其次，实现了下面的这种大树，还算满意吧。
2.扭曲: 其次树的生长不是笔直的，是扭曲的，所以通过三角函数随机产生角度值，然后计算x,y轴的偏移量，这样就能实现树的扭曲
3.分支: 通过双曲线方程 y=-a/x + b 去控制什么树在什么时候去产生分支（待会详解）；
4.开花: 因为花一般都是长在末梢，而我则是显示在最后几个分支的结点以及末梢进行展示（这个开花地点随意，不必纠结）
在区间[-0.1,0.1]中随机产生角度，通过三角函数计算x,y轴偏移量
vx的正负，决定了树的扭曲，vy的正负，决定树是向上生长还是向下
你可能觉得奇怪树为什么会向下生长，首先要理解我们这里将树抽象成了一个一个的圆
无数个圆连接在一起才组成树干，这个要能理解，然后，有些树的枝干有时是会往下生长一段，然后又往上生长的
这个生长的方向我们是不能控制的，并不是所有树都一直向上生长的，所以当vy为负值时就可以实现树枝
向下生长的情况，当然这个也是随机的，也正是我们想要的效果。
距离上一个分支点的距离是否大于我规定的长度，然后产生分支，但是这样就会看到每节分支之间的长度是一样的
看起来不美观，比较死板，最终使用双曲线方程 y=-1/x 去控制因为双曲线的走势是先快后慢的，
而树的生长也是越往后分支越多,可能你会奇怪曲线是先快后慢，树分叉是先慢后快的，不符合逻辑啊
别着急，下看下图:
从图中可以看见，X轴表示树干的粗细，Y轴表示分支的次数，当树干越来越细的时候，X轴变小
是不是Y轴就越来越大，且是先慢后快，这样就符合我们的需求了。
因此上面计算分支的次数公式就由此而来：
得到分支次数，比较是否大于当前分支，于是便随即产生分支数量，详见 Branch.prototype.clone 也就是创建一个树干添加到BranchArray中
这里我就不做过多介绍了，比较简单，而花朵的开放效果，就是改变花朵的半径
一颗大树从生长到开花所有的逻辑步骤大概这四步，其中最主要的逻辑是扭曲，为了这个扭曲我想了好多天，苦闷死我了。
最后通过循环调用 loop 方法， 遍历所有树干以及花朵，即可实现动态效果。
Github 源码下载
效果图
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 源码下载
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 将HTML5 Canvas的内容保存为图片借助toDataURL实现
- 天气预报小应用之canvas实现温度走势图
- 用canvas实现鼠标拖动绘制矩形框
- 简洁常用权限系统的设计与实现(六):不维护节点的深度level，手动计算level，构造树 (把一颗无序的树，变成有序的)
- 纯JavaScript实现HTML5 Canvas六种特效滤镜
- [UWP]附加属性2：实现一个Canvas
- canvas与html5实现视频截图功能
- 【实例】html5-canvas中实现背景图片的移动
- 把Html插入canvas实现网页截图
- html5 canvas结合js实现的非常酷的ascii animation动画特效
- 利用canvas实现田字格里写字，并适配移动端
- HTML5 Canvas简简单单实现手机九宫格手势密码解锁
- 基于Html5的Canvas实现的Clocks (钟表)
- 实现一颗二叉树，检查二叉树是否平衡（java实现）
- 用canvas实现html网页的动画背景
- javascript结合canvas实现图片旋转效果
- js+canvas实现纸牌游戏
- HTML5 Canvas 实现的Loading效果
- canvas像素级操作实现滤镜之浮雕滤镜
- 用css3和canvas实现的蜂窝动画效果