微信小程序 - canvas實現多行文本 ，實現文本斷行

1.canvas繪制文本坑點

繪制的文本不管多長，永遠只有一行，不會斷行。

2.解決思路

根據每行文本字數來斷行,超出的就向下排列。

由於 canvas繪制文本的語法如下：

context.fillText(text,x,y,maxWidth);

所以需要知道文本的起始坐標（x,y）

3.具體分析

 

 4.實現

說明：需返回多行文本高度，因為canvas的繪制都是通過坐標完成，方便繪制后面的內容取縱坐標

 

/**
    * @func 繪制多行文本
    * @desc 一個帶參數的函數
    * @param ctx - 參數ctx
    * @param text - 文本
    * @param pointX - 文本左上角x坐標位置
    * @param pointY - 左上角y坐標位置
    * @param rowStrnum - 每行多少個字
    * @param lineHeight - 行高
    * 
    */
  drawRowtext(ctx, text, pointX, pointY, rowStrnum, lineHeight) {
    var len = text.length;
    var n = len / rowStrnum;
    // console.log(n);
    var n1 = Math.ceil(n);//向上取整
    ctx.setFillStyle('#906338');
    ctx.setTextBaseline('top')
    for (var i = 0; i < n1; i++) {
      ctx.fillText(text.slice(i * rowStrnum, ((i + 1) * rowStrnum)+1), pointX, pointY + i * lineHeight);
    }
    return n * lineHeight;
  },

 

5.后記

之前的隨筆  《微信小程序canvas繪制，並且實現圖片保存》https://www.cnblogs.com/lingXie/p/10609530.html 也有繪制多行文本的方法，不過是網上找的，總是或多或少有的問題，所以修改了哈。