怎么在html5中使用帆布绘制文本自动换行

　　介绍

怎么在html5中使用帆布绘制文本自动换行?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

一个150 * 100的帆布画布,加个边框明显边界

& lt; canvas  id=癱anvas",风格=氨呔?solid  1 px  darkgoldenrod;“,宽度=?00 px",身高=?00 px"祝辞& lt;/canvas>

我们先来看fillText()方法,strokeText()方法同理

怎么在html5中使用帆布绘制文本自动换行

var  c=. getelementbyid (“canvas");, 　　var  ctx=c.getContext (“2 d");, 　　ctx.fillStyle=? E992B9"; 　　ctx.lineWidth=1; 　　var  str =,“假如生活欺骗了你,请不要悲伤! thank 你!“ 　　ctx.fillText (str, 0, 20);

可以看到fillText()在固宽的画布中,字数过多的时候,并不会自动换行,我们可以增加帆布本身的宽度,但这不是解决问题的根本方法。还记得之前介绍帆布基本api的时候,有一个函数,<代码> context.measureText(文本)这个函数可以测量字体的宽高度,那就好办了,我们计算好我们字符串的长度加上一个大概的宽度,基本上可以处理这种换行的问题了。

下面看具体实现方法:

var  c=. getelementbyid (“canvas");, 　　var  ctx=c.getContext (“2 d");, 　　ctx.fillStyle=? E992B9"; 　　ctx.lineWidth=1,, 　　var  str =,“假如生活欺骗了你,请不要悲伤! thank 你!“ 　　var  lineWidth =, 0; 　　var  canvasWidth =, c.width;//计算画布的宽度 　　var  initHeight=15//绘制字体距离帆布顶部初始的高度 　　var  lastSubStrIndex=, 0;,//每次开始截取的字符串的索引 　　(let  i=0; i< str.length;我+ +){, 　　,,,线宽+=ctx.measureText (str[我]).width;, 　　,,,如果(lineWidth> canvasWidth) {,, 　　,,,,,,,ctx.fillText (str.substring (lastSubStrIndex,我),0,initHeight);//绘制截取部分 　　,,,,,,,initHeight +=20;//20为字体的高度 　　,,,,,,,线宽=0; 　　,,,,,,,lastSubStrIndex=我; 　　,,,}, 　　,,,如果(i==str.length-1){//绘制剩余部分 　　,,,,,,,ctx.fillText (str.substring (lastSubStrIndex, i + 1), 0, initHeight); 　　,,,} 　　}

见效果图:

怎么在html5中使用帆布绘制文本自动换行

算法:计算字符串str里面每个字符的宽度的和线宽,如果大于画布的宽度,就截取这部分进行绘制,然后重置线宽,保存开始截取的最后的索引,当循环变量我为最后一个字符的时候,直接绘制剩余部分。

接下来:我们封装成一个方法,方便以后直接调用:

/* 　　str:要绘制的字符串 　　帆布:帆布对象 　　initX:绘制字符串起始x坐标 　　initY:绘制字符串起始y坐标 　　lineHeight:字行高,自己定义个值即可 　　*/function  canvasTextAutoLine (str、帆布、initX、initY lineHeight) { 　　,,,var  ctx =, canvas.getContext (“2 d");, 　　,,,var  lineWidth =, 0; 　　,,,var  canvasWidth =, c.width;, 　　,,,var  lastSubStrIndex=, 0;, 　　,,,(let 我=0;i canvasWidth-initX){//减去initX,防止边界出现的问题 　　,,,,,,,,,,,ctx.fillText (str.substring (lastSubStrIndex,我),initX, initY); 　　,,,,,,,,,,,initY +=lineHeight; 　　,,,,,,,,,,,线宽=0; 　　,,,,,,,,,,,lastSubStrIndex=我; 　　,,,,,,,}, 　　,,,,,,,如果我==str.length-1 () { 　　,,,,,,,,,,,ctx.fillText (str.substring (lastSubStrIndex, i + 1), initX, initY); 　　,,,,,,,} 　　,,,} 　　以前,,}

看完上述内容,你们掌握怎么在html5中使用帆布绘制文本自动换行的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注行业资讯频道,感谢各位的阅读!

怎么在html5中使用帆布绘制文本自动换行