适用于小程序和web端的 canvas 文字换行及居中问题

    // 获取真实字节长度
    function getTrueLength(str) {
      let trueLength = 0;
      for (let x = 0; x < str.length; x++) {
          // 如果字节码 大于 128， 则 每次 +两个长度， 否则，每次加一个长度
          trueLength += str.charCodeAt(x) > 128 ? 2 : 1;
      }
      return trueLength;
  }
  /**
   * @params str 要处理的字符串
   * @params leng 一行展示多少个字
   * @returns 截取到的位置的索引
   */
  function cutString(str, textNum) {
      // 文字长度
      let textIndex = str.length
      // 字节长度（字节数）
      let zjNum = 0;
      for (let x = 0; x < str.length; x++) {
          let num = str.charCodeAt(x) > 128 ? 2 : 1
          // 每次字节数加几
          if (zjNum + num < textNum) {
              zjNum += num;
          } else {
              textIndex = x;
              break;
          }
      }
      return textIndex;
  }
  /**
  * canvas 绘制文本函数
  * @params ctx canvas 上下文
  * @params str 需要展示的字符串
  * @params canvasW 画布的宽度
  * @params pleft 文字距离画布左侧的距离
  * @params dpi 默认是2
  * @params textLength 一行展示多少个字节（1个中文两个字节）
  * @params textAlign  文字的排布方式（left ， center， right）
  * @params lineHeight 行高
  * @example 调用 drawText(ctx, str, 360)
  **/
 export function drawText(ctx, str, canvasW, dpi = 2, pleft = 2, textLength = 55, textAlign = "left", lineHeight = 35) {
     ctx.textAlign = textAlign
     for (let i = 0; getTrueLength(str) > 0; i++) {
         let lastIndex = cutString(str, textLength);
         if(textAlign === "center"){
             pleft = canvasW / 2
         }
         ctx.fillText(str.substr(0, lastIndex).replace(/^\s+|\s+$/, ""), pleft, (30 + (lineHeight * i)) / dpi);
         str = str.substr(lastIndex);
     }
 }
    // canvas 画布逻辑
    let dom = document.getElementById('canvas')
    let ctx = dom.getContext("2d")
    ctx.fillStyle = "#f00"
    ctx.fillRect(0, 0, 360, 100)
    ctx.fillStyle = "#000"
    ctx.font = "13px sans-serif"
    let str = "HTML5的canvas 元素使用JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。"
   
   
    // 调用
    drawText(ctx, str, 360)
    // 居中调用
    // drawText(ctx, str, 10, 56, 360, "center")