在使用微信小程序画布绘制文本时，我们经常会遇到这样的问题：因为canvasContext.fillText参数是

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

1 wxml代码

canvas canvas-id=' my canvas ' style=' border : 1px solid；'/2 wxss代码

帆布{宽度： 99%；高度： 600 rpx；}3 js代码

page({ data : } }，onload :函数(选项){ const context=wx . createcanvascontext('我的画布')vartext='这是一段用于自动文本换行的文本。欢迎您通过设置文本的长度来指出缺陷'；//这是要绘制的文本var chr=text . split(')；//这个方法是把一个字符串分成一个字符串数组var temp=var row=[]；context . setfontsize(18)context . setfillstyle(' 000 ')for(var a=0；chr.lengtha ) { if (context.measureText(temp))。宽度250){ temp=chr[a]；} else { a-；//此处增加了-防止字符丢失。渲染中有一个对比行push(temp)。temp=} } row . push(temp)；//如果数组长度大于2，截取前两个if(row . length 2){ var row cut=row . slice(0，2)；var RowPart=Rowcut[1]；var测试=' '；var empty=[]；for(var a=0；rowPart.lengtha ) { if (context.measureText(test))。宽度220){ test=row part[a]；} else { break} } empty . push(test)；Var组=空[0]“.”//这里只显示两行，超出部分用rowcut表示。split (1，1，group)；row=rowCut} for(var b=0；b行.长度；b ) { context.fillText(行[b]，10，30 b * 30，300)；} context.draw()} })4)效果显示

与添加-和不添加-

以上是换行的方法。如果要设置换行而不是省略号，也可以参考上面的方法，将数组截取成一行，重新设置。道理是一样的。

以上是边肖介绍的微信小程序画布，实现自动换行、详解、集成。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！