前言

画布中产品名较长需要换行以及加···
比如淘宝上的产品名

image.png

画文字步骤

<template>
  <div class="canvasBox">
    <canvas canvas-id="myCanvas"  style="width: 1000rpx; height: {{canvasHeight}}rpx;"></canvas>
  </div>
</template>
<script>
  var ctx = wx.createCanvasContext('myCanvas');
  var that = this;
  var productName = '产品名称产品名称产品名称产品名称';//产品名称
//自适应手机宽度
let rpx= 0;
  wx.getSystemInfo({
    success(res) {
        rpx = res.windowWidth/375;
        that.canvasWidth = res.windowWidth
     }
})
  //绘制产品名称
  that.drawText(ctx,productName,45 * rpx,410 * rpx,140 * rpx);
</script>

绘制自动换行的字符串

drawText(context,t,x,y,w){
  var chr = t.split("");
  var temp = "";
  var row = [];

  context.font = "13rpx Arial";
  context.fillStyle = "#000";
  context.textBaseline = "middle";
  for(var a = 0; a < chr.length; a++){
        if( context.measureText(temp).width < w && context.measureText(temp+(chr[a])).width <= w){
              temp += chr[a];
          }//context.measureText(text).width  测量文本text的宽度
         else{
               row.push(temp);
               temp = chr[a];
          }
    }
      row.push(temp);
      //测量文本text的宽度

      //文字全部显示
     /* for(var b = 0; b < row.length; b++){
            context.fillText(row[b],x,y+(b+1)*24);//字体20，间隔24。类似行高
     } */

  // 只显示2行，加...
  for(var b = 0; b < 2; b++){
      if(context.measureText(row[0]).width<141 && row[1] == undefined){
           context.fillText(row[0],x,y+1*24);//字体20，间隔24。类似行高
       }else{
           var str = row[b];
           if(b == 1){
               //判断第二行是否大于宽度
               if(context.measureText(row[1]).width>context.measureText(row[0]).width-5){
               str = str.substring(0,str.length-1) + '...';
           }
       }
       context.fillText(str,x,y+(b+1)*24);
     }
   }
}

学习过程中参考文章，感谢分享！
canvas文字换行问题