html5canvas的绘制文本主动换行的示例代码-

在运用canvas绘制某字符串的时候，我们可能想要让该字符串在某处按请求换行。那么应当怎样实现，本文就来介绍一下，有乐趣的可以理解一下 在运用 canvas 绘制某字符串的时候，我们可能想要让该字符串在某处按请求换行。那么应当怎样实现，本文就来介绍一下，有乐趣的可以理解一下。

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

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

我们先来看fillText()办法，strokeText()办法同理

var c=document.getElementById("canvas"); 
var ctx=c.getContext("2d"); 
ctx.fillStyle="#E992B9";
ctx.lineWidth=1;
var str = "假设生活诈骗了你，请不要伤心！thank you!"
ctx.fillText(str,0,20);

可以看到fillText()在固宽的canvas中，字数过多的时候，并不会主动换行，我们可以添加canvas自身的宽度，但这不是解决题目的基本办法。还记得以前介绍canvas根本api的时候，有一个函数，context.measureText(text) 这个函数可以测量字体的宽高度，那就好办了，我们盘算好我们字符串的长度加上一个大约的宽度，根本上可以处置这种换行的题目了。

下面看概括实现办法：

var c=document.getElementById("canvas"); 
var ctx=c.getContext("2d"); 
ctx.fillStyle="#E992B9";
ctx.lineWidth=1; 
var str = "假设生活诈骗了你，请不要伤心！thank you!"
var lineWidth = 0;
var canvasWidth = c.width;//盘算canvas的宽度
var initHeight=15;//绘制字体距离canvas顶部初始的高度
var lastSubStrIndex= 0; //每次开端截取的字符串的索引
for(let i=0;icanvasWidth){  
        ctx.fillText(str.substring(lastSubStrIndex,i),0,initHeight);//绘制截取局部
        initHeight+=20;//20为字体的高度
        lineWidth=0;
        lastSubStrIndex=i;
    } 
    if(i==str.length-1){//绘制剩余局部
        ctx.fillText(str.substring(lastSubStrIndex,i+1),0,initHeight);
    }
}

奏效果图：

算法：盘算字符串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;icanvasWidth-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的绘制文本主动换行的示例代码的细致内容，更多请关注 百分百源码网 其它相干文章！