Canvas系列教程（N）绘制组织关系图

前段时间工作中需要用到层级关系，组织关系图来展示一些项目文件之间的关系，就像下面这样：

 最开始我查阅了一些网上的图表js库，发现不仅是使用起来很麻烦，而且也不支持自定义，样式什么的都是写死的，不方便自定义修改。于是乎在这种情况下我就用canvas自己写了一个这样的组织关系图。

我们先来捋一下思路，首先，我们的做法肯定是编写一个class或者是构造函数，内部写一些属性和方法，在实例化的时候通过循环，递归等方式不断的调用方法实现图形的渲染。

为此我将整幅图分成三部分，第一，矩形的绘制，第二，线条的绘制，第三，文字的绘制。

首先封装一个绘制矩形的方法：

  drawRect(startX, startY, width, height, color) {
          this.ctx.beginPath();
          this.ctx.moveTo(startX, startY);
          this.ctx.lineTo(startX + width, startY);
          this.ctx.lineTo(startX + width, startY + height);
          this.ctx.lineTo(startX, startY + height);
          this.ctx.fillStyle = color ? color : "blue";
          this.ct