Sample code for automatically wrapping text in HTML5 canvas

When using canvas to draw a string, we may want the string to wrap somewhere as required. So how to implement it, this article will introduce it, and those who are interested can learn about it.

This article introduces how to solve the line wrapping problem of drawText during the canvas drawing process. Let's first look at a problem that everyone usually encounters when drawing text in canvas:

A 150*100 canvas canvas, add A clear border

<canvas id="canvas" style="border:solid 1px darkgoldenrod;" width="200px" height="100px"></canvas>

Let’s first look at the fillText() method. The same is true for the strokeText() method

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);

You can see that fillText() is fixed In a wide canvas, when there are too many words, the lines will not wrap automatically. We can increase the width of the canvas itself, but this is not the fundamental way to solve the problem. I still remember that when I introduced the basic canvas API before, there was a function, context.measureText(text) This function can measure the width and height of the font, which is easy to handle. We calculate the length of our string plus The previous approximate width can basically handle this line wrapping problem.

See the specific implementation method below:

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;i<str.length;i++){ 
    lineWidth+=ctx.measureText(str[i]).width; 
    if(lineWidth>canvasWidth){  
        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);
    }
}

See the rendering:

Algorithm: Calculate the width of each character in the string str and lineWidth, if it is greater than the width of the canvas, intercept this part for drawing, then reset lineWidth, save the last index where the interception started, and when the loop variable i is the last character, draw the remaining part directly.

Next: We encapsulate it into a method so that it can be called directly in the future:

/*
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);
        }
    }
  }

The above is the entire content of this article, I hope it will be helpful to everyone's learning!

The above is the detailed content of Sample code for automatically wrapping text in HTML5 canvas. For more information, please follow other related articles on the PHP Chinese website!