小程序canvas绘制文字换行加省略号（简单版和复杂版）

小程序canvas的文字换行、加省略（简易版本）

  /**
   * 文字截取换行、加省略号
   * ctx：canvasContext
   * text：要输入的文字
   * y：绘制的y坐标
   * lenw：最大限制长度
   * linh：文本行高
   * lineNum：第几行（0表示第一行）
   * ellipsis：是否加省略号
   * 
   * 缺点是不能一次性传回需要的文字，而是一行行处理文字。可以用canvasContext.save()和canvasContext.restore()来解决然后直接在fillTextLineBreak()方法里面 fillText() 绘制。
   * 
   */
  //因为这个api---measureText  所以可以来个简单版
  fillTextLineBreak(ctx, text, y, lenw, linh, lineNum, ellipsis) {
    let i = 0;
    let n = 0;
    let r = -1;
    while (i < text.length) {
      while (ctx.measureText(text.substring(n, i)).width < lenw && i < text.length) {
        i++
      }
      r++
      if(lineNum == r) {
        let texts = text.substring(n, i)
        let measureW = ctx.measureText(text.substring(n, i)).width
        let obj = {
          text: ellipsis ? measureW > lenw ? texts + '...':texts : texts,
          y: y + linh * r
        }
        return obj  //返回一个对象，带符合条件的文字和y坐标
      }
      n = i
    }
  },

小程序canvas的文字换行、加省略（复杂版本）

/**
     * 渲染文字
     *
     * @param {Object} obj
     */
     let title = {
            x: 160,   // x坐标
            y: 330,   //y坐标
            width: 230,   //最大宽度
            height: 20,    //文本最大高度
            line: 2,    //文本最大行数
            color: '#231815',   //文本颜色
            size: 13,   // 文字大小
            align: 'center',   //文本左右对齐方式
            baseline: 'normal',  //竖直对齐方式
            text: '生活、工作中你总是充满活力，交友广阔，心胸宽广，人人都喜欢和你交朋友。',   //文本
            bold: false  //是否加粗
     };
    this.textWrap(title, ctx);
    drawText(obj, ctx) {
        ctx.save();
        ctx.setFillStyle(obj.color);
        ctx.setFontSize(obj.size);
        ctx.setTextAlign(obj.align);
        ctx.setTextBaseline(obj.baseline);
        if (obj.length) {
            let len = 0
            let index = 0
            let content = []
            let objWidth = 0
            for (let i = 0; len < obj.length; i++) {
                // if (!content[index]) content[index] = ''
                content.push(obj.text[i]);
                if (obj.text.charCodeAt(i) > 127 || (obj.text.charCodeAt(i) >= 48 && obj.text.charCodeAt(i) <= 57)) {
                    len += 2;
                } else {
                    len += 1;
                }
            }
            for (let i = 0; i < obj.text.length; i++) {
                if (obj.text.charCodeAt(i) > 127 || (obj.text.charCodeAt(i) >= 48 && obj.text.charCodeAt(i) <= 57)) {
                    index += 2;
                } else {
                    index += 1;
                }
            }
            if (len >= index) {
                obj.text = content.join('')
            } else {
                obj.text = content.join('') + '...';
            }
        }
        if (obj.bold) {
            console.log('字体加粗')
            ctx.fillText(obj.text, obj.x, obj.y - 0.5);
            ctx.fillText(obj.text, obj.x - 0.5, obj.y);
        }
        ctx.fillText(obj.text, obj.x, obj.y);
        if (obj.bold) {
            ctx.fillText(obj.text, obj.x, obj.y + 0.5);
            ctx.fillText(obj.text, obj.x + 0.5, obj.y);
        }
        ctx.restore();
    },

    /**
     * 文本换行
     *
     * @param {Object} obj
     */
    textWrap(obj, ctx) {
        var td = Math.ceil(obj.width / (obj.size));
        var tr = Math.ceil(obj.text.length / td);
        for (var i = 0; i < tr; i++) {
            var txt = {
                x: obj.x,
                y: obj.y + (i * obj.height),
                color: obj.color,
                size: obj.size,
                align: obj.align,
                baseline: obj.baseline,
                text: obj.text.substring(i * td, (i + 1) * td),
                bold: obj.bold
            };
            if (i < obj.line) {
                if (i == obj.line - 1) {
                    txt.text = txt.text.substring(0, txt.text.length);
                }
                this.drawText(txt, ctx);
            }
        }
    }