小程序canvas绘制多行文本

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

ctx.setFontSize(18);

ctx.fillStyle = "#858585";

ctx.lineWidth = 1;

var str = "事件分为冒泡事件和非冒泡事件： 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递";

var titleHeight = 55; // 标题的高度

var canvasWidth = 310;//计算canvas的宽度

var initHeight = 35;//绘制字体距离canvas顶部初始的高度

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

titleHeight = this.drawText(ctx, str, initHeight, titleHeight, canvasWidth);// 调用行文本换行函数

ctx.moveTo(15, titleHeight)

ctx.lineTo(325, titleHeight)

ctx.stroke() //绘制已定义的路径

ctx.draw();

多行文本换行函数

/**

* 绘制多行文本

* @param str 文本内容

* @param initHeight 文本绘制的初始高度

* @param titleHeight 绘制文本的高度

*/

  drawText: function (ctx, str, 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), 15, initHeight);//绘制截取部分

        initHeight += 30;//20为字体的高度

        lineWidth = 0;

        lastSubStrIndex = i;

        titleHeight += 30;

      }

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

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

      }

    }

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

    titleHeight = titleHeight + 10;

    return titleHeight

  },