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 on canvas:
A 150*100 canvas with a clear border
<canvas id=canvas style=border:solid 1px darkgoldenrod; width=200px height=100px></canvas>
Let’s look at the fillText() method first, and the strokeText() method is the same.
var c=document.getElementById(canvas); var ctx=c.getContext(2d); ctx.fillStyle=#E992B9;ctx.lineWidth=1;var str = If life deceives you, please don’t be sad! thank you!ctx.fillText(str,0,20);
You can see that fillText() will not automatically wrap when there are too many words in a fixed-width canvas. 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 and add an approximate width. Basically, this line wrapping problem can be solved.
Let’s look at the specific implementation method:
var c=document.getElementById(canvas); var ctx=c.getContext(2d); ctx.fillStyle=#E992B9;ctx.lineWidth=1; var str = If life deceives you, please don’t be sad! thank you!var lineWidth = 0;var canvasWidth = c.width;//Calculate the width of the canvas var initHeight=15;//The initial height of the drawn font from the top of the canvas var lastSubStrIndex= 0; //The string intercepted each time Index of 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);//Draw the intercepted part initHeight+=20;//20 is the height of the font lineWidth=0; lastSubStrIndex=i; } if(i==str.length-1){//Draw the remaining part ctx.fillText(str.substring(lastSubStrIndex,i+1),0,initHeight); }}See the renderings:
Algorithm: Calculate the sum of the width and lineWidth of each character in the string str. If it is greater than the width of the canvas, intercept this part for drawing, then reset the lineWidth, save the last index where the interception started, and when the loop variable i is the last character , draw the remaining parts directly.
Next: We encapsulate it into a method so that it can be called directly later:
/*str: string to be drawn canvas: canvas object initX: starting x coordinate of drawing string initY: starting y coordinate of drawing string lineHeight: word line height, you can define a value by yourself */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){//Subtract initX to prevent Problems with boundaries 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 study. I also hope everyone will support VeVb Wulin Network.