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

Editor to share with you how to draw text wrapping in html5 canvas, I believe most people do not know much about it, so share this article for your reference, I hope you will learn a lot after reading this article, let's learn about it!

How to solve the problem of drawText line wrapping in the process of canvas drawing, let's first 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), 0GrainitHeight);} above is all the content of the article "how to draw text wrapping in html5 canvas". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.