Canvas递归画一棵树

点生线，线生面，只要有了基本的构图元素，我们可以用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";