小程序canvas多行文本（可以兼容英文）

效果图：

方法封装：

 /**

 *【drawTxt】canvas 绘制多行文本

 *【TODO: 中英混排且考虑单词截断...】

 * 

 * @param {*} context 绘制上下文环境 【必传】

 * @param {*} text 文本内容

 * @param {*} broken 单词是否截断显示  【true  如果不考虑英文单词的完整性 适用于所有情况】 【false  考虑英文单词的完整性 仅适用于纯英文】

 * @param {*} fillStyle 文本颜色

 * @param {*} fontSize 文本大小

 * @param {*} x 文本左上角x坐标

 * @param {*} y 文本左上角y坐标

 * @param {*} lineHeight 行高

 * @param {*} maxWidth 最大宽度

 * @returns  此次绘制文本的高度 单位: px

 */

drawTxt:function({context,...rest}) {

  if (!context) throw Error('请传入绘制上下文环境context')

  // 获取计算后的值

  let { scale, text, fillStyle, broken, x, y, lineHeight, maxWidth, fontSize} = {...rest}

  // 设置字体样式

  context.setTextAlign('left');

  context.setTextBaseline('top');

  context.setFillStyle(fillStyle);

  context.setFontSize(fontSize);

  // broken: true  如果不考虑英文单词的完整性 适用于所有情况

  // broken: false  考虑英文单词的完整性 仅适用于纯英文

  //【TODO: 中英混排且考虑单词截断...】

  let splitChar = broken ? '' : ' ';

  let arrText = text.split(splitChar);

  let line = '';

  let linesCount = 0;

  for (var n = 0; n < arrText.length; n++) {

    let testLine = line + arrText[n] + splitChar

    let testWidth = context.measureText(testLine).width

    if (testWidth > maxWidth && n > 0) {

      // 一行已经绘制完成

      linesCount++;

      context.fillText(line, x, y);

      line = arrText[n] + splitChar;

      y += lineHeight;

    } else {

      // 一行还未绘制完成

      line = testLine;

    }

  }

  linesCount++;

  context.fillText(line, x, y);

},

使用如下

  draw:function(){

    var that = this;   

    const ctx = wx.createCanvasContext('canvasCon');

    ctx.setFontSize(32);

    ctx.setFillStyle('#333333');

    ctx.fillText('title',100,100);//商品标题

    var text = '@desc一个带参数的函数一个带参数的函数@desc一个带参数的函数 @desc 一个带参数的函数 @desc 一个带参数的函数 @desc 一个带参数的函数 @desc 一个带参数的函数@desc一个带参数的函数一个带参数的函数@desc一个带参数的函数 @desc 一个带参数的函数 @desc 一个带参数的函数 @desc 一个带参数的函数 @desc 一个带参数的函数';    

    that.drawTxt({

        context:ctx,

        text: text,

        broken: true,

        fillStyle: '#ccc',

        x: 0,

        y: 0,

        lineHeight: 20,

        maxWidth: 600 / 750 * wx.getSystemInfoSync().windowWidth,//px转rpx

        fontSize: 14

      });

    ctx.save();

    ctx.draw(0, 0, 400, 400);

  },

参考文档：https://blog.csdn.net/believeXin/article/details/88741107