微信小程序-canvas绘制文字实现自动换行

在使用微信小程序canvas绘制文字时，时常会遇到这样的问题：因为canvasContext.fillText参数为

我们只能设置文本的最大宽度，这就产生一定的了问题。如果我们绘制的文本长度不确定或者我们希望文本超出自动换行或者用省略号表示，光靠这个API是无法完成的。下面本人就讲下我在开发中是如何解决这个问题的。

1 wxml代码。

<canvas canvas-id="myCanvas"style"border: 1px solid;"/>1

2 wxss代码

canvas {
  height600rpx;
}1234

3 js代码

Page({

  onLoad function(options){
)
;//这是要绘制的文本
 temp ;
    contextsetFontSize(18)
for( a 0;< chrlength a++){
        temp +=[a];
else{
        rowpush);
}
    row); 

rowlength >2{
 rowPart  rowCut[1];
        }
}
      emptygroup empty]+"..."//这里只显示两行，超出的用...表示
      row ;
 b  b      contextfillTextb],102);">1030*30300);
} 

4 效果展示
添加了a- -和没有a- -的对比

以上就是换行的方法，如果想设置为不换行超出用省略号显示，也可参照上面的方法，将数组截取为一行再设置，道理是一样的。
本文来自 优雅的勒布朗 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/weixin_41941325/article/details/80274969?utm_source=copy
                        
（编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!