canvas文字绘制自动换行

前言

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

image.png

画文字步骤

绘制自动换行的字符串

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文字换行问题