Canvas递归画一棵树

最新推荐文章于 2022-12-30 22:32:29 发布

登楼痕

最新推荐文章于 2022-12-30 22:32:29 发布

阅读量1.6k

点赞数 4

分类专栏： Canvas 文章标签： css3 canvas

本文链接：https://blog.csdn.net/denglouhen/article/details/115868086

版权

本文介绍如何使用HTML5 Canvas通过递归方法绘制一棵树，包括树干、树枝和树叶的生成。通过调整树枝的长度、角度和粗细，以及树叶的分布，实现了一种简单而有效的树的绘制算法。

摘要由CSDN通过智能技术生成

点生线，线生面，只要有了基本的构图元素，我们可以用canvas画出各种图案，画棵树简直就是小case了。

画树的思路很简单，大树干分叉出若干的树枝，以不同角度和长度延伸出去并逐渐变细，树枝的末端再延伸树枝，所以很容易想到用递归来实现。

所以递归函数里是在画一层树枝，需要的参数就是：

startX：树枝起始的x轴坐标

startY：树枝起始的y轴坐标

length：长度

angle：分叉角度

depth：剩余层数

branchWidth：该层的树枝粗细

于是我们可以实现画出躯干的函数：

drawTree(startX, startY, length, angle, depth, branchWidth) {
      let _this = this;
      var newLength,
        newAngle,
        newDepth,
        endX,
        endY,
        maxAngle = (2 * Math.PI) / 5,
        subBranches;
      //开始绘制路径
      _this.ctx.beginPath();
      _this.ctx.moveTo(startX, startY);
      endX = startX + Math.cos(angle) * length;
      endY = startY + Math.sin(angle) * length;

      _this.ctx.lineCap = "round";