定義文字自動換行

	var drawText = function (ctx, str, leftWidth, initHeight, titleHeight, canvasWidth) {
         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 += 30; //16為字型的高度
                 lineWidth = 0;
                 lastSubStrIndex = i;
                 titleHeight += 30;
             }
             if (i == str.length - 1) { //繪製剩餘部分
                 ctx.fillText(str.substring(lastSubStrIndex, i + 1), leftWidth, initHeight);
             }
        }
         // 標題border-bottom 線距頂部距離
         titleHeight = titleHeight + 10;
         return titleHeight
     }
 

定義單行溢位省略

 const drawText = (ctx, str, leftWidth, topHeight, maxWidth) => {
      let strWidth = ctx.measureText(str).width;
      const ellipsis = '...';
      const ellipsisWidth = ctx.measureText(ellipsis).width;
      if (strWidth <= maxWidth || maxWidth <= ellipsisWidth) {
        return ctx.fillText(str, leftWidth, topHeight);
      } else {
        let len = str.length;
        while (strWidth + ellipsisWidth >= maxWidth && len-- > 0) {
          str = str.slice(0, len);
          strWidth = ctx.measureText(str).width;
        }
        return ctx.fillText(str + ellipsis, leftWidth, topHeight);
      }
    }