使用 js canvas 画一棵二叉树

使用 js canvas 画一棵二叉树

闲话少说，上效果图

页面执行时是一层一层画出来的，下面是代码，优化的空间很大，有兴趣的可以拿去搞一搞

  var Point = function(x, y){
   
    this.x = x;
    this.y = y;
  };

  var Line = function(length, startPoint, endPoint, direction, lr){
   
    this.length = length;
    this.startPoint = startPoint;
    this.endPoint = endPoint;
    this.lr = lr;//用来区别根以上的分支是左还是右
    this.direction = direction;
  };

  function printLine(l){
   
    ctx.fillStyle="#eaeaea";
    ctx.fillRect(0,0,1440,860);
    ctx.moveTo(l.startPoint.x, l.startPoint.y);
    ctx.lineTo(l.endPoint.x, l.endPoint.y);
    ctx.strokeStyle="#1ee9a9";
    ctx.stroke();
  }

  //默认值：角度步长、起点、线段长度、初始方向、等级；角度步长、0级起点位置，作为不变信息处理
  var angle = 18; 
  var startPoint = new Point(720, 860);
  var level = 0;

  var length = 60;
  var direction = 0;
  var lineArr = [];