canvas文本换行

ctx.setFillStyle('#808080') // 文字颜色：黑色

ctx.setFontSize(32)        // 文字字号：24px

that.drawText(ctx, text, 40, 1160, 90, 470, 42);



//文本换行 参数：1、canvas对象，2、文本 3、距离左侧的距离 4、距离顶部的距离 5、标题高度 6、文本的宽度 7、行高

  drawText: function(ctx, str, leftWidth, initHeight, titleHeight, canvasWidth, lineHeight) {

      var lineWidth = 0;

      var lastSubStrIndex = 0; //每次开始截取的字符串的索引

      for (let i = 0; i < str.length; i++) {

          lineWidth += ctx.measureText(str[i]).width;

          if (lineWidth > canvasWidth) {

              ctx.fillText(str.substring(lastSubStrIndex, i), leftWidth, initHeight); //绘制截取部分

              initHeight += fontSize; //16为字体的高度

              lineWidth = 0;

              lastSubStrIndex = i;

              titleHeight += fontSize;

          }

          if (i == str.length - 1) { //绘制剩余部分

              ctx.fillText(str.substring(lastSubStrIndex, i + 1), leftWidth, initHeight);

          }

      }

      // 标题border-bottom 线距顶部距离

      // titleHeight = titleHeight + 10;

      return titleHeight

  }