HTML 5 Canvas 递归画树

上图就是用html5随机生成的大树 : ) 但是你应该没想到40+行代码就可以搞定了吧~接下来就跟大家说说这棵大树是如何实现的。

创新互联建站服务项目包括翼城网站建设、翼城网站制作、翼城网页制作以及翼城网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，翼城网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到翼城省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

同样必须要有html容器。新建Index.html，代码如下:

 
 
 
 
      
  
  
  
  1.  
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.  
    4.   
  
  
  
  4. canvas tree 
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9.  
    10.

接下来咱们开始tree.js:

 
 
 
 
      
  
  
  
  1. var canvas = document.createElement("canvas");  
    2.   
  
  
  
  2. var ctx = canvas.getContext("2d");  
    3.   
  
  
  
  3. canvas.width = 640;  
    4.   
  
  
  
  4. canvas.height = 480;  
    5.   
  
  
  
  5. document.body.appendChild(canvas); 
    6.

代码很好理解，创建一个canvas画布，然后选择为2d画布，设置长宽，***将这个画布添加到body标签下。

这个脚本最重要的函数在下面，大树就是递归调用这个函数实现的，调用一次画一条线段:

 
 
 
 
      
  
  
  
  1. var drawTree = function (ctx, startX, startY, length, angle, depth, branchWidth){  
    2.   
  
  
  
  2. var rand = Math.random,  
    3.   
  
  
  
  3. newLength, newAngle, newDepth, maxBranch = 3,  
    4.   
  
  
  
  4. endX, endY, maxAngle = 2 * Math.PI / 4,  
    5.   
  
  
  
  5. subBraches;  
    6.   
  
  
  
  6. ctx.beginPath();  
    7.   
  
  
  
  7. ctx.moveTo(startX, startY);  
    8.   
  
  
  
  8. endX = startX + length * Math.cos(angle);  
    9.   
  
  
  
  9. endY = startY + length * Math.sin(angle);  
    10.   
  
  
  
  10. ctx.lineCap = 'round';  
    11.   
  
  
  
  11. ctx.lineWidth = branchWidth;  
    12.   
  
  
  
  12. ctx.lineTo(endX, endY);  
    13.   
  
  
  
  13. if (depth <= 2){  
    14.   
  
  
  
  14. ctx.strokeStyle = 'rgb(0,' + (((rand() * 64) + 128) >> 0) + ',0)';  
    15.   
  
  
  
  15. } else {  
    16.   
  
  
  
  16. ctx.strokeStyle = 'rgb(' + (((rand() * 64) + 64) >> 0) + ',50,25)';  
    17.   
  
  
  
  17. }  
    18.   
  
  
  
  18. ctx.stroke();  
    19.   
  
  
  
  19. newDepth = depth - 1;  
    20.   
  
  
  
  20. if (!newDepth)  
    21.   
  
  
  
  21. return;  
    22.   
  
  
  
  22. subBranches = (rand() * (maxBranch - 1)) + 1;  
    23.   
  
  
  
  23. branchWidth *= 0.7;  
    24.   
  
  
  
  24. for (var i = 0; i < subBranches; i++){  
    25.   
  
  
  
  25. newAngle = angle + rand() * maxAngle - maxAngle * 0.5;  
    26.   
  
  
  
  26. newLength = length * (0.7 + rand() * 0.3);  
    27.   
  
  
  
  27. drawTree(ctx, endX, endY, newLength, newAngle, newDepth, branchWidth);  
    28.   
  
  
  
  28. }  
    29.   
  
  
  
  29. } 
    30.

接下来一点点解释:

首先，解释下各个变量的含义。ctx就是前面我们的2d画布;startX是线段开始的横坐标，同理startY是纵坐标;length是线段长度;angle是角度;depth是深度，叶子深度为1，树干为12(可自己设定);branchWidth就线段的粗细。有了这些信息，其实就描述了一个线段，通过这些信息我们才能画一个线段。

接下来又很可耻地一大段定义:

 
 
 
 
      
  
  
  
  1. var rand = Math.random,  
    2.   
  
  
  
  2. newLength, newAngle, newDepth, maxBranch = 3,  
    3.   
  
  
  
  3. endX, endY, maxAngle = 2 * Math.PI / 4,  
    4.   
  
  
  
  4. subBraches; 
    5.

rand其实就是随机一个0~1之间的实数，顾名思义，接下来这些new的就是下一节线段的各种参数。maxBranch就是最多有3个分叉，***的角度 PI/2 即为，下一级调整角度在90%范围内。subBranches就是分叉的个数。

好了，重要可以画了:

 
 
 
 
      
  
  
  
  1. ctx.beginPath();  
    2.   
  
  
  
  2. ctx.moveTo(startX, startY);  
    3.   
  
  
  
  3. endX = startX + length * Math.cos(angle);  
    4.   
  
  
  
  4. endY = startY + length * Math.sin(angle);  
    5.   
  
  
  
  5. ctx.lineCap = 'round';  
    6.   
  
  
  
  6. ctx.lineWidth = branchWidth;  
    7.   
  
  
  
  7. ctx.lineTo(endX, endY); 
    8.

beginPath()表示告诉浏览器“我要开始画了！”，把之前的记录放弃了，这点有点像ps。moveTo()把光标移动到(startX, startY)，再计算终点坐标，endX,endY，有点像高中学的参数方程。然后告诉浏览器，lineCap要round,线段的两头要是圆形的。有多粗呢？等于branchWidth。线段一直画到(endX, endY)。

 
 
 
 
      
  
  
  
  1. if (depth <= 2){  
    2.   
  
  
  
  2. ctx.strokeStyle = 'rgb(0,' + (((rand() * 64) + 128) >> 0) + ',0)';  
    3.   
  
  
  
  3. } else {  
    4.   
  
  
  
  4. ctx.strokeStyle = 'rgb(' + (((rand() * 64) + 64) >> 0) + ',50,25)';  
    5.   
  
  
  
  5. } 
    6.

如果是已经画到了***两级，即为叶子，那么就rgb就为(0, 128~192, 0)(rgb代表颜色，分别为红绿蓝，red green blue)。还没的话，就在(64~128, 50 ,25)中取。大家可能发现了，rgb必须为整数，但是rand()只能rand实数。大家其实也注意到了有个” >>  0″，js当中表示位运算，整体向右移动n位，0就是移动0位。其实它的作用和Math.floor()一样，但是速度更快。

动手画!

 
 
 
 
      
  
  
  
  1. ctx.stroke(); 
    2.

这个线段就画好了，是时候准备下它的分叉的时候了。

 
 
 
 
      
  
  
  
  1. newDepth = depth - 1;  
    2.   
  
  
  
  2. if (!newDepth)  
    3.   
  
  
  
  3. return; 
    4.

如果这个线段是***一级，就没有分叉了，也是一个递归的终止条件。

 
 
 
 
      
  
  
  
  1. subBranches = (rand() * (maxBranch - 1)) + 1;  
    2.   
  
  
  
  2. branchWidth *= 0.7;  
    3.   
  
  
  
  3. for (var i = 0; i < subBranches; i++){  
    4.   
  
  
  
  4. newAngle = angle + rand() * maxAngle - maxAngle * 0.5;  
    5.   
  
  
  
  5. newLength = length * (0.7 + rand() * 0.3);  
    6.   
  
  
  
  6. drawTree(ctx, endX, endY, newLength, newAngle, newDepth, branchWidth);  
    7.   
  
  
  
  7. } 
    8.

分叉数是1~3中的一个数。然后有多少个分叉，就画几条线段,newAngle为原角度调整90度之内，新长度为原长度的0.7~1.0之间。

***画出主干，这棵树就可以开始画了。

 
 
 
 
      
  
  
  
  1. drawTree(ctx, 320, 470, 60, -Math.PI / 2, 12, 12); 
    2.

大家可能注意到角度为负，不符合传统观念。但你要知道，画布的纵坐标和传统的坐标轴正好是相反的。

剩下可以发挥的东西还很多，比如大家可以调整各种参数，使树的颜色、大小变化，或者用这种方法去做些其他的事~

打完收工~附上文件:tree.zip

网站名称：HTML 5 Canvas 递归画树
网页URL：http://www.shufengxianlan.com/qtweb/news35/543735.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

Google知识

分类信息网

盐亭网站建设　　 　研学实践　　 　成都托管服务器　　 　名片印刷厂　　 　青羊区雕琢时光　　 　软文营销　　 　营销型网站建设　　 　成都app开发公司　　 　重庆水土机房托管　　 　服务器机柜租用　　 　电商网站　　 　成都云主机　　 　公司网站建设　　 　IOS开发　　 　企业网站建设　　 　中国电信成都枢纽中心　　 　成都办公窗帘　　 　成都网站推广　　 　成都网站运营维护　　 　手机网站建设