Shulou(Shulou.com)06/02 Report--

This article introduces the knowledge of "how to automatically wrap text in canvas in html5". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

First, let's take a look at a problem that people usually encounter when drawing text in canvas:

A 150-to-100 canvas canvas with a clear border

Let's first look at the fillText () method, which is the same with the strokeText () 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!" ctx.fillText (str,0,20)

You can see that fillText () does not automatically wrap when there are too many words in the 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 api of canvas, there was a function, context.measureText (text), which could measure the width and height of the font, so it was easy. We calculated the length of our string plus an approximate width, which basically dealt with the problem of line wrapping.

Let's look at the specific implementation methods:

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.widthramp / calculate the width of the canvas var initHeight=15;// draw font distance from the initial height at the top of the canvas / the index for (let iWidth) {ctx.fillText (str.substring (lastSubStrIndex,i), 0jinitHeight) of the string to be intercepted each time; / / draw the height lineWidth=0; lastSubStrIndex=i with the intercepted portion initHeight+=20;//20 as the font } if (i==str.length-1) {/ / draw the rest of the ctx.fillText (str.substring (lastSubStrIndex,i+1), 0menthinitHeight);}}

Effect picture:

Algorithm: calculate the lineWidth of the width of each character in the string str. If it is greater than the width of canvas, intercept this part to draw, then reset the lineWidth, save the last index that begins to be intercepted, and draw the rest directly when the loop variable I is the last character.

Next: we encapsulate it into a method that can be called directly later:

/ * str: string to be drawn canvas:canvas object initX: draw string start x coordinate initY: draw string start y coordinate lineHeight: the line is high and 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.width0; var lastSubStrIndex= 0; for (let iWid0) IcanvasWidth-initX) {/ / subtract initX to prevent boundary problems 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) This is the end of the content of "how to automatically wrap text in canvas in html5". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.