html5 canvas的绘制文本自动换行的示例代码

本文介绍怎么解决canvas绘图过程中，drawText的换行问题，先看一个大家平时在canvas绘制文本都会遇到的问题：

一个150*100的canvas画布，加个边框明显边界

 canvas id= canvas >
我们先来看fillText()方法，strokeText()方法同理
var c=document.getElementById( canvas var ctx=c.getContext( 2d ctx.fill >
可以看到fillText()在固宽的canvas中，字数过多的时候，并不会自动换行，我们可以增加canvas本身的宽度，但这不是解决问题的根本方法。还记得之前介绍canvas基本api的时候，有一个函数，context.measureText(text) 这个函数可以测量字体的宽高度，那就好办了，我们计算好我们字符串的长度加上一个大概的宽度，基本上可以处理这种换行的问题了。
下面看具体实现方法：
var c=document.getElementById( canvas var ctx=c.getContext( 2d ctx.fill >
见效果图：
算法：计算字符串str里面每个字符的宽度的和lineWidth，如果大于canvas的宽度，就截取这部分进行绘制，然后重置lineWidth，保存开始截取的最后的索引，当循环变量i为最后一个字符的时候，直接绘制剩余部分。
接下来：我们封装成一个方法，方便以后直接调用：
/*str:要绘制的字符串canvas:canvas对象initX:绘制字符串起始x坐标initY:绘制字符串起始y坐标lineHeight:字行高，自己定义个值即可function canvasTextAutoLine(str,canvas,initX,initY,lineHeight){ var ctx = canvas.getContext( 2d  var lineWidth = 0; var canvasWidth = c.width;  var lastSubStrIndex= 0;  for(let i=0;i str.length;i++){  lineWidth+=ctx.measureText(str[i]).width;  if(lineWidth canvasWidth-initX){//减去initX,防止边界出现的问题 ctx.fillText(str.substring(lastSubStrIndex,i),initX,initY); initY+=lineHeight; lineWidth=0; lastSubStrIndex=i; if(i==str.length-1){ ctx.fillText(str.substring(lastSubStrIndex,i+1),initX,initY); }
以上就是本文的全部内容，希望对大家的学习有所帮助！
以上就是html5 canvas的绘制文本自动换行的示例代码的详细内容，其它编程语言        
郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。