canvas.drawtext 换行,canvas文字换行

　　本文介绍了在画布绘制过程中如何解决绘图文本的换行问题。先来看一个大家平时在画布上画文字都会遇到的问题：

　　150*100的画布画布，边框清晰。

　　canvas id= canvas style= border:solid 1px dark golden rod；width= 200 px height= 100px /canvas我们先来看fillText()方法，strokeText()方法也是一样的。

　　var c=document . getelementbyid( canvas )；var CTX=c . get context( 2d )；CTX . fill style= # e992b 9 ；CTX . line width=1；Var=如果生活欺骗了你，请不要难过！谢谢你！ctx.fillText(str，0，20)；可以看到fillText()在一个固定宽度的画布中。单词太多的时候不会自动换行。我们可以增加画布本身的宽度，但这不是解决问题的根本办法。还记得之前介绍canvas的基础api的时候，有一个函数，context.measureText(text)，可以测量字体的宽度和高度。那很简单。我们计算了我们的字符串的长度加上一个大概的宽度，基本上我们可以处理换行的问题。

　　具体实现方法见下图：

　　var c=document . getelementbyid( canvas )；var CTX=c . get context( 2d )；CTX . fill style= # e992b 9 ；CTX . line width=1；Var=如果生活欺骗了你，请不要难过！谢谢你！var线宽=0；var canvasWidth=c.width//计算画布的宽度var initHeight=15//绘图字体距画布顶部的初始高度varlastsbritex=0；//每次截取的字符串的索引为for(设I=0；istr.lengthI){ line width=CTX . measure text(str[I])。宽度；if(lineWidthcanvasWidth){ CTX . fill text(str . substring(lastsubstride，I)，0，initHeight)；//画截取部分initHeight=20//20是字体线宽的高度=0；lastsubstride=I；} if(i==str.length-1){//画出剩下的CTX。FillText(字符串。substring(lastsubstride，I 1)，0，init height)；}}看效果图：

　　算法：计算字符串str中每个字符的宽度之和，如果大于canvas的宽度，截取这部分并绘制，然后重置线宽，保存最后一个开始截取的索引，当循环变量I是最后一个字符时，直接绘制其余部分。

　　接下来：我们把它封装成一个方法，方便以后直接调用：

　　/*str:要绘制的字符串canvas:canvas对象initx:绘制字符串开始x坐标inity:绘制字符串开始y坐标lineHeight: line height，可以自己定义一个值*/函数canvas textautoline (str，canvas，initX，initY，line height){ var CTX=canvas . get context( 2d )；var线宽=0；var canvasWidth=c.widthvar lastsubstride=0；for(设I=0；istr.lengthI){ line width=CTX . measure text(str[I])。宽度；if(linewidthcanvaswidth-initX){//减去initX以防止边界问题CTX。FillText(字符串。substring(lastsubstride，I)，initx，inity)；initY=lineHeight线宽=0；lastsubstride=I；} if(I==str . length-1){ CTX . fill text(str . substring(lastsubstride，i 1)，initX，initY)；}}}以上是本文的全部内容。希望对大家的学习和支持有帮助。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。