blocks|key|784414|text|我也不认为这是可能的，但一个解决办法是创建一个元素并使用Javascript定位它。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|784415|entityMap^0|N|3|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

I don't think this is possible neither, but a workaround for this is to create a <code>&lt;p&gt;</code>element and position it with Javascript.

blocks|key|784455|text|恐怕这是Canvas的fillText的一个限制。没有多行支持。更糟糕的是，没有内置的方法来测量线条高度，只有宽度，这使得你自己测量变得更加困难！|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|784456|很多人都编写了自己的多行支持，其中最值得注意的可能就是Mozilla+Skywriter了。|784457|您需要做的要点是多次调用fillText，同时每次都将文本的高度添加到y值。(我相信，测量M的宽度是skywriter的人用来近似文本的方法。)|784458|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/mozilla/skywriter^0|B|8|0|R|H|0|0|C|8|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@$9|V|A|W|1|X]]|E|$]]|$1|H|3|I|5|6|7|Y|8|@$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|J|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]]]

I'm afraid it is a limitation of Canvas' <code>fillText</code>. There is no multi-line support. Whats worse, there's no built-in way to measure line height, only width, making doing it yourself even harder!

A lot of people have written their own multi-line support, perhaps the most notable project that has is <a href="https://github.com/mozilla/skywriter" rel="noreferrer">Mozilla Skywriter</a>.

The gist of what you'll need to do is multiple <code>fillText</code> calls while adding the height of the text to the y value each time. (measuring the width of M is what the skywriter people do to approximate text, I believe.)

blocks|key|784514|text|@Gaby+Petrioli提供的自动换行(空格换行)代码非常有用。我已经扩展了他的代码以提供对换行符\n的支持。此外，获得边界框的尺寸通常很有用，因此multiMeasureText()会同时返回宽度和高度。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|784515|你可以在这里看到代码：http://jsfiddle.net/jeffchan/WHgaY/76/|784516|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/4478742/html5-canvas-can-i-somehow-use-linefeeds-in-filltext/4478894#4478894|1|http://jsfiddle.net/jeffchan/WHgaY/76/^0|1F|2|24|I|0|E|0|0|B|12|1|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]]|D|@$9|W|A|X|1|Y]]|E|$]]|$1|F|3|G|5|6|7|Z|8|@]|D|@$9|10|A|11|1|12]]|E|$]]|$1|H|3|-4|5|6|7|13|8|@]|D|@]|E|$]]]|I|$J|$5|K|L|M|E|$N|O]]|P|$5|K|L|M|E|$N|Q]]]]

The code for word-wrapping (breaking at spaces) provided by <a href="https://stackoverflow.com/questions/4478742/html5-canvas-can-i-somehow-use-linefeeds-in-filltext/4478894#4478894">@Gaby Petrioli</a> is very helpful.
I've extended his code to provide support for newline characters <code>\n</code>. Also, often times it's useful to have the dimensions of the bounding box, so <code>multiMeasureText()</code> returns both the width and the height.

You can see the code here: <a href="http://jsfiddle.net/jeffchan/WHgaY/76/" rel="nofollow noreferrer">http://jsfiddle.net/jeffchan/WHgaY/76/</a>

blocks|key|998953|text|我认为你仍然可以依赖CSS|type|unstyled|depth|inlineStyleRanges|entityRanges|data|998954|ctx.measureText().height+doesn’t+exist.|code-block|syntax|javascript|998955|幸运的是，通过CSS+hack-ardry+(+seeTypographic+Metrics可以找到更多修复使用CSS测量的旧实现的方法)，我们可以通过测量具有相同字体属性的offsetHeight来找到文本的高度：|998956|var+d+=+document.createElement(”span”);
d.font+=+“20px+arial”
d.textContent+=+“Hello+world!”
var+emHeight+=+d.offsetHeight;|998957|来自：http://www.html5rocks.com/en/tutorials/canvas/texteffects/|offset|length|998958|entityMap|0|LINK|mutability|MUTABLE|url|http://www.html5rocks.com/en/tutorials/canvas/texteffects/^0|0|0|0|0|3|1M|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

I think you can still rely on CSS

<pre><code>ctx.measureText().height doesn’t exist.
</code></pre>

Luckily, through CSS hack-ardry ( seeTypographic Metrics for more ways to fix older implementations of using CSS measurements), we can find the height of the text through measuring the offsetHeight of a with the same font-properties:

<pre><code>var d = document.createElement(”span”);
d.font = “20px arial”
d.textContent = “Hello world!”
var emHeight = d.offsetHeight;
</code></pre>

from:
<a href="http://www.html5rocks.com/en/tutorials/canvas/texteffects/" rel="nofollow">http://www.html5rocks.com/en/tutorials/canvas/texteffects/</a>

blocks|key|784728|text|也许来参加这个聚会有点晚了，但我发现下面的在画布上包装文本的教程很完美。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|784729|http://www.html5canvastutorials.com/tutorials/html5-canvas-wrap-text-tutorial/|offset|length|784730|从那时起，我想到了让多行代码工作起来(对不起，Ramirez，你的代码不适合我！)。我在画布中包装文本的完整代码如下：|784731|<script+type="text/javascript">

+++++//+http:+//www.html5canvastutorials.com/tutorials/html5-canvas-wrap-text-tutorial/
+++++function+wrapText(context,+text,+x,+y,+maxWidth,+lineHeight)+{
++++++++var+cars+=+text.split("\n");

++++++++for+(var+ii+=+0;+ii+<+cars.length;+ii%2B%2B)+{

++++++++++++var+line+=+"";
++++++++++++var+words+=+cars[ii].split("+");

++++++++++++for+(var+n+=+0;+n+<+words.length;+n%2B%2B)+{
++++++++++++++++var+testLine+=+line+%2B+words[n]+%2B+"+";
++++++++++++++++var+metrics+=+context.measureText(testLine);
++++++++++++++++var+testWidth+=+metrics.width;

++++++++++++++++if+(testWidth+>+maxWidth)+{
++++++++++++++++++++context.fillText(line,+x,+y);
++++++++++++++++++++line+=+words[n]+%2B+"+";
++++++++++++++++++++y+%2B=+lineHeight;
++++++++++++++++}
++++++++++++++++else+{
++++++++++++++++++++line+=+testLine;
++++++++++++++++}
++++++++++++}

++++++++++++context.fillText(line,+x,+y);
++++++++++++y+%2B=+lineHeight;
++++++++}
+++++}

+++++function+DrawText()+{

+++++++++var+canvas+=+document.getElementById("c");
+++++++++var+context+=+canvas.getContext("2d");

+++++++++context.clearRect(0,+0,+500,+600);

+++++++++var+maxWidth+=+400;
+++++++++var+lineHeight+=+60;
+++++++++var+x+=+20;+//+(canvas.width+-+maxWidth)+/+2;
+++++++++var+y+=+58;


+++++++++var+text+=+document.getElementById("text").value.toUpperCase();++++++++++++++++

+++++++++context.fillStyle+=+"rgba(255,+0,+0,+1)";
+++++++++context.fillRect(0,+0,+600,+500);

+++++++++context.font+=+"51px+'LeagueGothicRegular'";
+++++++++context.fillStyle+=+"#333";

+++++++++wrapText(context,+text,+x,+y,+maxWidth,+lineHeight);
+++++}

+++++$(document).ready(function+()+{

+++++++++$("#text").keyup(function+()+{
+++++++++++++DrawText();
+++++++++});

+++++});

++++</script>|code-block|syntax|javascript|784732|其中c是画布的ID，text是textbox的ID。|style|CODE|784733|正如你可能看到的，我使用的是非标准字体。您可以使用@+font+-face，只要您在操作画布之前在某些文本上使用了该字体-否则画布将不会拾取该字体。|784734|希望这对某些人有帮助。|784735|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|26|0|0|0|0|2|1|A|4|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|12|8|@]|9|@$D|13|E|14|1|15]]|A|$]]|$1|F|3|G|5|6|7|16|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|17|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|18|8|@$D|19|E|1A|O|P]|$D|1B|E|1C|O|P]]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1D|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1E|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|C]]]]

Maybe coming to this party a bit late, but I found the following tutorial for wrapping text on a canvas perfect. 

<a href="http://www.html5canvastutorials.com/tutorials/html5-canvas-wrap-text-tutorial/" rel="noreferrer">http://www.html5canvastutorials.com/tutorials/html5-canvas-wrap-text-tutorial/</a>

From that I was able to think get multi lines working (sorry Ramirez, yours didn't work for me!). My complete code to wrap text in a canvas is as follows:

<pre><code>&lt;script type="text/javascript"&gt;

 // http: //www.html5canvastutorials.com/tutorials/html5-canvas-wrap-text-tutorial/
 function wrapText(context, text, x, y, maxWidth, lineHeight) {
 var cars = text.split("\n");

 for (var ii = 0; ii &lt; cars.length; ii++) {

 var line = "";
 var words = cars[ii].split(" ");

 for (var n = 0; n &lt; words.length; n++) {
 var testLine = line + words[n] + " ";
 var metrics = context.measureText(testLine);
 var testWidth = metrics.width;

 if (testWidth &gt; maxWidth) {
 context.fillText(line, x, y);
 line = words[n] + " ";
 y += lineHeight;
 }
 else {
 line = testLine;
 }
 }

 context.fillText(line, x, y);
 y += lineHeight;
 }
 }

 function DrawText() {

 var canvas = document.getElementById("c");
 var context = canvas.getContext("2d");

 context.clearRect(0, 0, 500, 600);

 var maxWidth = 400;
 var lineHeight = 60;
 var x = 20; // (canvas.width - maxWidth) / 2;
 var y = 58;


 var text = document.getElementById("text").value.toUpperCase(); 

 context.fillStyle = "rgba(255, 0, 0, 1)";
 context.fillRect(0, 0, 600, 500);

 context.font = "51px 'LeagueGothicRegular'";
 context.fillStyle = "#333";

 wrapText(context, text, x, y, maxWidth, lineHeight);
 }

 $(document).ready(function () {

 $("#text").keyup(function () {
 DrawText();
 });

 });

 &lt;/script&gt;
</code></pre>

Where <code>c</code> is the ID of my canvas and <code>text</code> is the ID of my textbox.

As you can probably see am using a non-standard font. You can use @font-face as long as you have used the font on some text PRIOR to manipulating the canvas - otherwise the canvas won't pick up the font.

Hope this helps someone.

blocks|key|784802|text|画布元素不支持换行符'\n‘、制表符'\t’或<+br+/>标记等字符。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|784803|试试看：|784804|var+newrow+=+mheight+%2B+30;
ctx.fillStyle+=+"rgb(0,+0,+0)";
ctx.font+=+"bold+24px+'Verdana'";
ctx.textAlign+=+"center";
ctx.fillText("Game+Over",+mwidth,+mheight);+//first+line
ctx.fillText("play+again",+mwidth,+newrow);+//second+line+|code-block|syntax|javascript|784805|或者可能是多行：|784806|var+textArray+=+new+Array('line2',+'line3',+'line4',+'line5');
var+rows+=+98;
ctx.fillStyle+=+"rgb(0,+0,+0)";
ctx.font+=+"bold+24px+'Verdana'";
ctx.textAlign+=+"center";
ctx.fillText("Game+Over",+mwidth,+mheight);+//first+line

for(var+i=0;+i+<+textArray.length;+%2B%2Bi)+{
rows+%2B=+30;
ctx.fillText(textArray[i],+mwidth,+rows);+
}++|784807|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

Canvas element doesn't support such characters as newline '\n', tab '\t' or &lt; br /> tag.

Try it:

<pre><code>var newrow = mheight + 30;
ctx.fillStyle = "rgb(0, 0, 0)";
ctx.font = "bold 24px 'Verdana'";
ctx.textAlign = "center";
ctx.fillText("Game Over", mwidth, mheight); //first line
ctx.fillText("play again", mwidth, newrow); //second line 
</code></pre>

or perhaps multiple lines:

<pre><code>var textArray = new Array('line2', 'line3', 'line4', 'line5');
var rows = 98;
ctx.fillStyle = "rgb(0, 0, 0)";
ctx.font = "bold 24px 'Verdana'";
ctx.textAlign = "center";
ctx.fillText("Game Over", mwidth, mheight); //first line

for(var i=0; i &lt; textArray.length; ++i) {
rows += 30;
ctx.fillText(textArray[i], mwidth, rows); 
} 
</code></pre>

blocks|key|999182|text|我刚刚扩展了CanvasRenderingContext2D，添加了两个函数:+mlFillText和mlStrokeText。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|999183|您可以在GitHub中找到最新版本|999184|使用此功能，您可以填充/描边框中的多行文本。您可以垂直和水平对齐文本。(它考虑到了\n的，还可以对齐文本)。|999185|原型是：|999186|function+mlFillText(text,x,y,w,h,vAlign,hAlign,lineheight);
function+mlStrokeText(text,x,y,w,h,vAlign,hAlign,lineheight);|code-block|syntax|javascript|999187|其中vAlign可以是：top、center或button|999188|hAlign可以是：left、center、right或justify|999189|你可以在这里测试这个库：http://jsfiddle.net/4WRZj/1/|999190|​|999191|📷|atomic|999192|999193|以下是该库的代码：|999194|//+Library:+mltext.js
//+Desciption:+Extends+the+CanvasRenderingContext2D+that+adds+two+functions:+mlFillText+and+mlStrokeText.
//
//+The+prototypes+are:+
//
//+function+mlFillText(text,x,y,w,h,vAlign,hAlign,lineheight);
//+function+mlStrokeText(text,x,y,w,h,vAlign,hAlign,lineheight);
//+
//+Where+vAlign+can+be:+"top",+"center"+or+"button"
//+And+hAlign+can+be:+"left",+"center",+"right"+or+"justify"
//+Author:+Jordi+Baylina.+(baylina+at+uniclau.com)
//+License:+GPL
//+Date:+2013-02-21

function+mlFunction(text,+x,+y,+w,+h,+hAlign,+vAlign,+lineheight,+fn)+{
++++text+=+text.replace(/[\n]/g,+"+\n+");
++++text+=+text.replace(/\r/g,+"");
++++var+words+=+text.split(/[+]%2B/);
++++var+sp+=+this.measureText('+').width;
++++var+lines+=+[];
++++var+actualline+=+0;
++++var+actualsize+=+0;
++++var+wo;
++++lines[actualline]+=+{};
++++lines[actualline].Words+=+[];
++++i+=+0;
++++while+(i+<+words.length)+{
++++++++var+word+=+words[i];
++++++++if+(word+==+"\n")+{
++++++++++++lines[actualline].EndParagraph+=+true;
++++++++++++actualline%2B%2B;
++++++++++++actualsize+=+0;
++++++++++++lines[actualline]+=+{};
++++++++++++lines[actualline].Words+=+[];
++++++++++++i%2B%2B;
++++++++}+else+{
++++++++++++wo+=+{};
++++++++++++wo.l+=+this.measureText(word).width;
++++++++++++if+(actualsize+===+0)+{
++++++++++++++++while+(wo.l+>+w)+{
++++++++++++++++++++word+=+word.slice(0,+word.length+-+1);
++++++++++++++++++++wo.l+=+this.measureText(word).width;
++++++++++++++++}
++++++++++++++++if+(word+===+"")+return;+//+I+can't+fill+a+single+character
++++++++++++++++wo.word+=+word;
++++++++++++++++lines[actualline].Words.push(wo);
++++++++++++++++actualsize+=+wo.l;
++++++++++++++++if+(word+!=+words[i])+{
++++++++++++++++++++words[i]+=+words[i].slice(word.length,+words[i].length);
++++++++++++++++}+else+{
++++++++++++++++++++i%2B%2B;
++++++++++++++++}
++++++++++++}+else+{
++++++++++++++++if+(actualsize+%2B+sp+%2B+wo.l+>+w)+{
++++++++++++++++++++lines[actualline].EndParagraph+=+false;
++++++++++++++++++++actualline%2B%2B;
++++++++++++++++++++actualsize+=+0;
++++++++++++++++++++lines[actualline]+=+{};
++++++++++++++++++++lines[actualline].Words+=+[];
++++++++++++++++}+else+{
++++++++++++++++++++wo.word+=+word;
++++++++++++++++++++lines[actualline].Words.push(wo);
++++++++++++++++++++actualsize+%2B=+sp+%2B+wo.l;
++++++++++++++++++++i%2B%2B;
++++++++++++++++}
++++++++++++}
++++++++}
++++}
++++if+(actualsize+===+0)+lines[actualline].pop();
++++lines[actualline].EndParagraph+=+true;

++++var+totalH+=+lineheight+*+lines.length;
++++while+(totalH+>+h)+{
++++++++lines.pop();
++++++++totalH+=+lineheight+*+lines.length;
++++}

++++var+yy;
++++if+(vAlign+==+"bottom")+{
++++++++yy+=+y+%2B+h+-+totalH+%2B+lineheight;
++++}+else+if+(vAlign+==+"center")+{
++++++++yy+=+y+%2B+h+/+2+-+totalH+/+2+%2B+lineheight;
++++}+else+{
++++++++yy+=+y+%2B+lineheight;
++++}

++++var+oldTextAlign+=+this.textAlign;
++++this.textAlign+=+"left";

++++for+(var+li+in+lines)+{
++++++++var+totallen+=+0;
++++++++var+xx,+usp;
++++++++for+(wo+in+lines[li].Words)+totallen+%2B=+lines[li].Words[wo].l;
++++++++if+(hAlign+==+"center")+{
++++++++++++usp+=+sp;
++++++++++++xx+=+x+%2B+w+/+2+-+(totallen+%2B+sp+*+(lines[li].Words.length+-+1))+/+2;
++++++++}+else+if+((hAlign+==+"justify")+&&+(!lines[li].EndParagraph))+{
++++++++++++xx+=+x;
++++++++++++usp+=+(w+-+totallen)+/+(lines[li].Words.length+-+1);
++++++++}+else+if+(hAlign+==+"right")+{
++++++++++++xx+=+x+%2B+w+-+(totallen+%2B+sp+*+(lines[li].Words.length+-+1));
++++++++++++usp+=+sp;
++++++++}+else+{+//+left
++++++++++++xx+=+x;
++++++++++++usp+=+sp;
++++++++}
++++++++for+(wo+in+lines[li].Words)+{
++++++++++++if+(fn+==+"fillText")+{
++++++++++++++++this.fillText(lines[li].Words[wo].word,+xx,+yy);
++++++++++++}+else+if+(fn+==+"strokeText")+{
++++++++++++++++this.strokeText(lines[li].Words[wo].word,+xx,+yy);
++++++++++++}
++++++++++++xx+%2B=+lines[li].Words[wo].l+%2B+usp;
++++++++}
++++++++yy+%2B=+lineheight;
++++}
++++this.textAlign+=+oldTextAlign;
}

(function+mlInit()+{
++++CanvasRenderingContext2D.prototype.mlFunction+=+mlFunction;

++++CanvasRenderingContext2D.prototype.mlFillText+=+function+(text,+x,+y,+w,+h,+vAlign,+hAlign,+lineheight)+{
++++++++this.mlFunction(text,+x,+y,+w,+h,+hAlign,+vAlign,+lineheight,+"fillText");
++++};

++++CanvasRenderingContext2D.prototype.mlStrokeText+=+function+(text,+x,+y,+w,+h,+vAlign,+hAlign,+lineheight)+{
++++++++this.mlFunction(text,+x,+y,+w,+h,+hAlign,+vAlign,+lineheight,+"strokeText");
++++};
})();|999195|下面是使用示例：|999196|var+c+=+document.getElementById("myCanvas");
var+ctx+=+c.getContext("2d");

var+T+=+"This+is+a+very+long+line+line+with+a+CR+at+the+end.\n+This+is+the+second+line.\nAnd+this+is+the+last+line.";
var+lh+=+12;

ctx.lineWidth+=+1;

ctx.mlFillText(T,+10,+10,+100,+100,+'top',+'left',+lh);
ctx.strokeRect(10,+10,+100,+100);

ctx.mlFillText(T,+110,+10,+100,+100,+'top',+'center',+lh);
ctx.strokeRect(110,+10,+100,+100);

ctx.mlFillText(T,+210,+10,+100,+100,+'top',+'right',+lh);
ctx.strokeRect(210,+10,+100,+100);

ctx.mlFillText(T,+310,+10,+100,+100,+'top',+'justify',+lh);
ctx.strokeRect(310,+10,+100,+100);

ctx.mlFillText(T,+10,+110,+100,+100,+'center',+'left',+lh);
ctx.strokeRect(10,+110,+100,+100);

ctx.mlFillText(T,+110,+110,+100,+100,+'center',+'center',+lh);
ctx.strokeRect(110,+110,+100,+100);

ctx.mlFillText(T,+210,+110,+100,+100,+'center',+'right',+lh);
ctx.strokeRect(210,+110,+100,+100);

ctx.mlFillText(T,+310,+110,+100,+100,+'center',+'justify',+lh);
ctx.strokeRect(310,+110,+100,+100);

ctx.mlFillText(T,+10,+210,+100,+100,+'bottom',+'left',+lh);
ctx.strokeRect(10,+210,+100,+100);

ctx.mlFillText(T,+110,+210,+100,+100,+'bottom',+'center',+lh);
ctx.strokeRect(110,+210,+100,+100);

ctx.mlFillText(T,+210,+210,+100,+100,+'bottom',+'right',+lh);
ctx.strokeRect(210,+210,+100,+100);

ctx.mlFillText(T,+310,+210,+100,+100,+'bottom',+'justify',+lh);
ctx.strokeRect(310,+210,+100,+100);

ctx.mlStrokeText("Yo+can+also+use+mlStrokeText!",+0+,+310+,+420,+30,+'center',+'center',+lh);|999197|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/jbaylina/jsTifier|1|http://jsfiddle.net/4WRZj/1/|2|IMAGE|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/26178b1ab32e182f033572bfd50ec9f3.png|imageAlt^0|6|O|0|4|6|0|0|15|2|0|0|0|2|6|C|3|G|6|N|6|0|0|6|A|4|F|6|M|5|S|7|0|C|S|1|0|0|0|1|2|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1Q|8|@$9|1R|A|1S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|1T|8|@]|D|@$9|1U|A|1V|1|1W]]|E|$]]|$1|H|3|I|5|6|7|1X|8|@$9|1Y|A|1Z|B|C]]|D|@]|E|$]]|$1|J|3|K|5|6|7|20|8|@]|D|@]|E|$]]|$1|L|3|M|5|N|7|21|8|@]|D|@]|E|$O|P]]|$1|Q|3|R|5|6|7|22|8|@$9|23|A|24|B|C]|$9|25|A|26|B|C]|$9|27|A|28|B|C]|$9|29|A|2A|B|C]]|D|@]|E|$]]|$1|S|3|T|5|6|7|2B|8|@$9|2C|A|2D|B|C]|$9|2E|A|2F|B|C]|$9|2G|A|2H|B|C]|$9|2I|A|2J|B|C]|$9|2K|A|2L|B|C]]|D|@]|E|$]]|$1|U|3|V|5|6|7|2M|8|@]|D|@$9|2N|A|2O|1|2P]]|E|$]]|$1|W|3|X|5|6|7|2Q|8|@]|D|@]|E|$]]|$1|Y|3|Z|5|10|7|2R|8|@]|D|@$9|2S|A|2T|1|2U]]|E|$]]|$1|11|3|X|5|6|7|2V|8|@]|D|@]|E|$]]|$1|12|3|13|5|6|7|2W|8|@]|D|@]|E|$]]|$1|14|3|15|5|N|7|2X|8|@]|D|@]|E|$O|P]]|$1|16|3|17|5|6|7|2Y|8|@]|D|@]|E|$]]|$1|18|3|19|5|N|7|2Z|8|@]|D|@]|E|$O|P]]|$1|1A|3|-4|5|6|7|30|8|@]|D|@]|E|$]]]|1B|$1C|$5|1D|1E|1F|E|$1G|1H]]|1I|$5|1D|1E|1F|E|$1G|1J]]|1K|$5|1L|1E|1M|E|$1N|1O|1P|-4]]]]

I just extended the <code>CanvasRenderingContext2D</code> adding two functions: mlFillText and mlStrokeText.
You can find the last version in <a href="https://github.com/jbaylina/jsTifier" rel="nofollow noreferrer">GitHub</a>:
With this functions you can fill / stroke miltiline text in a box. You can align the text verticaly and horizontaly. (It takes in account <code>\n</code>'s and can also justify the text).
The prototypes are:
<pre><code>function mlFillText(text,x,y,w,h,vAlign,hAlign,lineheight);
function mlStrokeText(text,x,y,w,h,vAlign,hAlign,lineheight);
</code></pre>
Where <code>vAlign</code> can be: <code>top</code>, <code>center</code> or <code>button</code>
And <code>hAlign</code> can be: <code>left</code>, <code>center</code>, <code>right</code> or <code>justify</code>
You can test the lib here: <a href="http://jsfiddle.net/4WRZj/1/" rel="nofollow noreferrer">http://jsfiddle.net/4WRZj/1/</a>
<img src="https://i.stack.imgur.com/QIITC.png" alt="enter image description here" />
Here is the code of the library:
<pre><code>// Library: mltext.js
// Desciption: Extends the CanvasRenderingContext2D that adds two functions: mlFillText and mlStrokeText.
//
// The prototypes are: 
//
// function mlFillText(text,x,y,w,h,vAlign,hAlign,lineheight);
// function mlStrokeText(text,x,y,w,h,vAlign,hAlign,lineheight);
// 
// Where vAlign can be: &quot;top&quot;, &quot;center&quot; or &quot;button&quot;
// And hAlign can be: &quot;left&quot;, &quot;center&quot;, &quot;right&quot; or &quot;justify&quot;
// Author: Jordi Baylina. (baylina at uniclau.com)
// License: GPL
// Date: 2013-02-21

function mlFunction(text, x, y, w, h, hAlign, vAlign, lineheight, fn) {
 text = text.replace(/[\n]/g, &quot; \n &quot;);
 text = text.replace(/\r/g, &quot;&quot;);
 var words = text.split(/[ ]+/);
 var sp = this.measureText(' ').width;
 var lines = [];
 var actualline = 0;
 var actualsize = 0;
 var wo;
 lines[actualline] = {};
 lines[actualline].Words = [];
 i = 0;
 while (i &lt; words.length) {
 var word = words[i];
 if (word == &quot;\n&quot;) {
 lines[actualline].EndParagraph = true;
 actualline++;
 actualsize = 0;
 lines[actualline] = {};
 lines[actualline].Words = [];
 i++;
 } else {
 wo = {};
 wo.l = this.measureText(word).width;
 if (actualsize === 0) {
 while (wo.l &gt; w) {
 word = word.slice(0, word.length - 1);
 wo.l = this.measureText(word).width;
 }
 if (word === &quot;&quot;) return; // I can't fill a single character
 wo.word = word;
 lines[actualline].Words.push(wo);
 actualsize = wo.l;
 if (word != words[i]) {
 words[i] = words[i].slice(word.length, words[i].length);
 } else {
 i++;
 }
 } else {
 if (actualsize + sp + wo.l &gt; w) {
 lines[actualline].EndParagraph = false;
 actualline++;
 actualsize = 0;
 lines[actualline] = {};
 lines[actualline].Words = [];
 } else {
 wo.word = word;
 lines[actualline].Words.push(wo);
 actualsize += sp + wo.l;
 i++;
 }
 }
 }
 }
 if (actualsize === 0) lines[actualline].pop();
 lines[actualline].EndParagraph = true;

 var totalH = lineheight * lines.length;
 while (totalH &gt; h) {
 lines.pop();
 totalH = lineheight * lines.length;
 }

 var yy;
 if (vAlign == &quot;bottom&quot;) {
 yy = y + h - totalH + lineheight;
 } else if (vAlign == &quot;center&quot;) {
 yy = y + h / 2 - totalH / 2 + lineheight;
 } else {
 yy = y + lineheight;
 }

 var oldTextAlign = this.textAlign;
 this.textAlign = &quot;left&quot;;

 for (var li in lines) {
 var totallen = 0;
 var xx, usp;
 for (wo in lines[li].Words) totallen += lines[li].Words[wo].l;
 if (hAlign == &quot;center&quot;) {
 usp = sp;
 xx = x + w / 2 - (totallen + sp * (lines[li].Words.length - 1)) / 2;
 } else if ((hAlign == &quot;justify&quot;) &amp;&amp; (!lines[li].EndParagraph)) {
 xx = x;
 usp = (w - totallen) / (lines[li].Words.length - 1);
 } else if (hAlign == &quot;right&quot;) {
 xx = x + w - (totallen + sp * (lines[li].Words.length - 1));
 usp = sp;
 } else { // left
 xx = x;
 usp = sp;
 }
 for (wo in lines[li].Words) {
 if (fn == &quot;fillText&quot;) {
 this.fillText(lines[li].Words[wo].word, xx, yy);
 } else if (fn == &quot;strokeText&quot;) {
 this.strokeText(lines[li].Words[wo].word, xx, yy);
 }
 xx += lines[li].Words[wo].l + usp;
 }
 yy += lineheight;
 }
 this.textAlign = oldTextAlign;
}

(function mlInit() {
 CanvasRenderingContext2D.prototype.mlFunction = mlFunction;

 CanvasRenderingContext2D.prototype.mlFillText = function (text, x, y, w, h, vAlign, hAlign, lineheight) {
 this.mlFunction(text, x, y, w, h, hAlign, vAlign, lineheight, &quot;fillText&quot;);
 };

 CanvasRenderingContext2D.prototype.mlStrokeText = function (text, x, y, w, h, vAlign, hAlign, lineheight) {
 this.mlFunction(text, x, y, w, h, hAlign, vAlign, lineheight, &quot;strokeText&quot;);
 };
})();
</code></pre>
And here is the use example:
<pre><code>var c = document.getElementById(&quot;myCanvas&quot;);
var ctx = c.getContext(&quot;2d&quot;);

var T = &quot;This is a very long line line with a CR at the end.\n This is the second line.\nAnd this is the last line.&quot;;
var lh = 12;

ctx.lineWidth = 1;

ctx.mlFillText(T, 10, 10, 100, 100, 'top', 'left', lh);
ctx.strokeRect(10, 10, 100, 100);

ctx.mlFillText(T, 110, 10, 100, 100, 'top', 'center', lh);
ctx.strokeRect(110, 10, 100, 100);

ctx.mlFillText(T, 210, 10, 100, 100, 'top', 'right', lh);
ctx.strokeRect(210, 10, 100, 100);

ctx.mlFillText(T, 310, 10, 100, 100, 'top', 'justify', lh);
ctx.strokeRect(310, 10, 100, 100);

ctx.mlFillText(T, 10, 110, 100, 100, 'center', 'left', lh);
ctx.strokeRect(10, 110, 100, 100);

ctx.mlFillText(T, 110, 110, 100, 100, 'center', 'center', lh);
ctx.strokeRect(110, 110, 100, 100);

ctx.mlFillText(T, 210, 110, 100, 100, 'center', 'right', lh);
ctx.strokeRect(210, 110, 100, 100);

ctx.mlFillText(T, 310, 110, 100, 100, 'center', 'justify', lh);
ctx.strokeRect(310, 110, 100, 100);

ctx.mlFillText(T, 10, 210, 100, 100, 'bottom', 'left', lh);
ctx.strokeRect(10, 210, 100, 100);

ctx.mlFillText(T, 110, 210, 100, 100, 'bottom', 'center', lh);
ctx.strokeRect(110, 210, 100, 100);

ctx.mlFillText(T, 210, 210, 100, 100, 'bottom', 'right', lh);
ctx.strokeRect(210, 210, 100, 100);

ctx.mlFillText(T, 310, 210, 100, 100, 'bottom', 'justify', lh);
ctx.strokeRect(310, 210, 100, 100);

ctx.mlStrokeText(&quot;Yo can also use mlStrokeText!&quot;, 0 , 310 , 420, 30, 'center', 'center', lh);
</code></pre>

blocks|key|785017|text|这是我的解决方案，修改这里已经介绍过的流行的wrapText()函数。我使用了JavaScript的原型化特性，这样您就可以从canvas上下文中调用函数了。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|785018|CanvasRenderingContext2D.prototype.wrapText+=+function+(text,+x,+y,+maxWidth,+lineHeight)+{

++++var+lines+=+text.split("\n");

++++for+(var+i+=+0;+i+<+lines.length;+i%2B%2B)+{

++++++++var+words+=+lines[i].split('+');
++++++++var+line+=+'';

++++++++for+(var+n+=+0;+n+<+words.length;+n%2B%2B)+{
++++++++++++var+testLine+=+line+%2B+words[n]+%2B+'+';
++++++++++++var+metrics+=+this.measureText(testLine);
++++++++++++var+testWidth+=+metrics.width;
++++++++++++if+(testWidth+>+maxWidth+&&+n+>+0)+{
++++++++++++++++this.fillText(line,+x,+y);
++++++++++++++++line+=+words[n]+%2B+'+';
++++++++++++++++y+%2B=+lineHeight;
++++++++++++}
++++++++++++else+{
++++++++++++++++line+=+testLine;
++++++++++++}
++++++++}

++++++++this.fillText(line,+x,+y);
++++++++y+%2B=+lineHeight;
++++}
}|code-block|syntax|javascript|785019|基本用法：|785020|var+myCanvas+=+document.getElementById("myCanvas");
var+ctx+=+myCanvas.getContext("2d");
ctx.fillStyle+=+"black";
ctx.font+=+"12px+sans-serif";
ctx.textBaseline+=+"top";
ctx.wrapText("Hello\nWorld!",20,20,160,16);|785021|下面是我做的一个演示：http://jsfiddle.net/7RdbL/|offset|length|785022|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/7RdbL/^0|0|0|0|0|B|Q|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|X|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Y|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|Z|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|10|8|@]|9|@$M|11|N|12|1|13]]|A|$]]|$1|O|3|-4|5|6|7|14|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|V]]]]

Here's my solution, modifying the popular wrapText() function that is already presented here. I'm using the prototyping feature of JavaScript so that you can call the function from the canvas context.

<pre><code>CanvasRenderingContext2D.prototype.wrapText = function (text, x, y, maxWidth, lineHeight) {

 var lines = text.split("\n");

 for (var i = 0; i &lt; lines.length; i++) {

 var words = lines[i].split(' ');
 var line = '';

 for (var n = 0; n &lt; words.length; n++) {
 var testLine = line + words[n] + ' ';
 var metrics = this.measureText(testLine);
 var testWidth = metrics.width;
 if (testWidth &gt; maxWidth &amp;&amp; n &gt; 0) {
 this.fillText(line, x, y);
 line = words[n] + ' ';
 y += lineHeight;
 }
 else {
 line = testLine;
 }
 }

 this.fillText(line, x, y);
 y += lineHeight;
 }
}
</code></pre>

Basic usage:

<pre><code>var myCanvas = document.getElementById("myCanvas");
var ctx = myCanvas.getContext("2d");
ctx.fillStyle = "black";
ctx.font = "12px sans-serif";
ctx.textBaseline = "top";
ctx.wrapText("Hello\nWorld!",20,20,160,16);
</code></pre>

Here's a demonstration I put together:
<a href="http://jsfiddle.net/7RdbL/">http://jsfiddle.net/7RdbL/</a>

blocks|key|785090|text|我碰巧遇到了这个问题，因为我也有同样的问题。我正在使用可变字体大小，所以这里考虑到了这一点：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|785091|var+texts=($(this).find('.noteContent').html()).split(" ");
for+(var+k+in+texts)+{
++++ctx.fillText(texts[k],+left,+(top%2B((parseInt(ctx.font)%2B2)*k)));
}|code-block|syntax|javascript|785092|其中.noteContent是用户编辑的可内容编辑的div+(嵌套在jQuery+each函数中)，ctx.font是"14px+Arial“(请注意，像素大小在前面)|785093|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

I happened across this due to having the same problem. I'm working with variable font size, so this takes that into account:

<pre><code>var texts=($(this).find('.noteContent').html()).split("&lt;br&gt;");
for (var k in texts) {
 ctx.fillText(texts[k], left, (top+((parseInt(ctx.font)+2)*k)));
}
</code></pre>

where .noteContent is the contenteditable div the user edited (this is nested in a jQuery each function), and ctx.font is "14px Arial" (notice that the pixel size comes first)

blocks|key|785135|text|将文本拆分为多行，然后分别绘制：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|785136|function+fillTextMultiLine(ctx,+text,+x,+y)+{
++var+lineHeight+=+ctx.measureText("M").width+*+1.2;
++var+lines+=+text.split("\n");
++for+(var+i+=+0;+i+<+lines.length;+%2B%2Bi)+{
++++ctx.fillText(lines[i],+x,+y);
++++y+%2B=+lineHeight;
++}
}|code-block|syntax|javascript|785137|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

Split the text into lines, and draw each separately:

<pre><code>function fillTextMultiLine(ctx, text, x, y) {
 var lineHeight = ctx.measureText("M").width * 1.2;
 var lines = text.split("\n");
 for (var i = 0; i &lt; lines.length; ++i) {
 ctx.fillText(lines[i], x, y);
 y += lineHeight;
 }
}
</code></pre>

blocks|key|999435|text|我的ES5解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|999436|var+wrap_text+=+(ctx,+text,+x,+y,+lineHeight,+maxWidth,+textAlign)+=>+{
++if(!textAlign)+textAlign+=+'center'
++ctx.textAlign+=+textAlign
++var+words+=+text.split('+')
++var+lines+=+[]
++var+sliceFrom+=+0
++for(var+i+=+0;+i+<+words.length;+i%2B%2B)+{
++++var+chunk+=+words.slice(sliceFrom,+i).join('+')
++++var+last+=+i+===+words.length+-+1
++++var+bigger+=+ctx.measureText(chunk).width+>+maxWidth
++++if(bigger)+{
++++++lines.push(words.slice(sliceFrom,+i).join('+'))
++++++sliceFrom+=+i
++++}
++++if(last)+{
++++++lines.push(words.slice(sliceFrom,+words.length).join('+'))
++++++sliceFrom+=+i
++++}
++}
++var+offsetY+=+0
++var+offsetX+=+0
++if(textAlign+===+'center')+offsetX+=+maxWidth+/+2
++for(var+i+=+0;+i+<+lines.length;+i%2B%2B)+{
++++ctx.fillText(lines[i],+x+%2B+offsetX,+y+%2B+offsetY)
++++offsetY+=+offsetY+%2B+lineHeight
++}
}|code-block|syntax|javascript|999437|有关该问题的更多信息，请访问on+my+blog。|offset|length|999438|entityMap|0|LINK|mutability|MUTABLE|url|http://olegberman.com/simple-algorithm-to-wrap-text-in-html5-canvas/^0|0|0|E|A|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

My ES5 solution for the problem:

<pre><code>var wrap_text = (ctx, text, x, y, lineHeight, maxWidth, textAlign) =&gt; {
 if(!textAlign) textAlign = 'center'
 ctx.textAlign = textAlign
 var words = text.split(' ')
 var lines = []
 var sliceFrom = 0
 for(var i = 0; i &lt; words.length; i++) {
 var chunk = words.slice(sliceFrom, i).join(' ')
 var last = i === words.length - 1
 var bigger = ctx.measureText(chunk).width &gt; maxWidth
 if(bigger) {
 lines.push(words.slice(sliceFrom, i).join(' '))
 sliceFrom = i
 }
 if(last) {
 lines.push(words.slice(sliceFrom, words.length).join(' '))
 sliceFrom = i
 }
 }
 var offsetY = 0
 var offsetX = 0
 if(textAlign === 'center') offsetX = maxWidth / 2
 for(var i = 0; i &lt; lines.length; i++) {
 ctx.fillText(lines[i], x + offsetX, y + offsetY)
 offsetY = offsetY + lineHeight
 }
}
</code></pre>

More information on the issue is <a href="http://olegberman.com/simple-algorithm-to-wrap-text-in-html5-canvas/" rel="nofollow">on my blog</a>.

blocks|key|785258|text|如果只需要两行文本，可以将它们拆分为两个不同的fillText调用，并为每个调用提供不同的基线。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|785259|ctx.textBaseline="bottom";
ctx.fillText("First+line",+x-position,+y-position);
ctx.textBaseline="top";
ctx.fillText("Second+line",+x-position,+y-position);|code-block|syntax|javascript|785260|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

If you only need two lines of text, you can split them into two different fillText calls and give each one a different baseline.

<pre><code>ctx.textBaseline="bottom";
ctx.fillText("First line", x-position, y-position);
ctx.textBaseline="top";
ctx.fillText("Second line", x-position, y-position);
</code></pre>

blocks|key|785289|text|这个问题不是从canvas是如何工作的角度来思考的。如果你想换行符，只需调整下一个ctx.fillText的坐标即可。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|785290|ctx.fillText("line1",+w,x,y,z)
ctx.fillText("line2",+w,x,y,z%2B20)|code-block|syntax|javascript|785291|entityMap^0|15|C|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

This question isn't thinking in terms of how canvas works. If you want a line break just simply adjust the coordinates of your next <code>ctx.fillText</code>.

<pre><code>ctx.fillText("line1", w,x,y,z)
ctx.fillText("line2", w,x,y,z+20)
</code></pre>

blocks|key|785382|text|这是我在画布中绘制多行文本居中的函数(只换行，不换字)|type|unstyled|depth|inlineStyleRanges|entityRanges|data|785383|​|785384|var+c+=+document.getElementById("myCanvas");
var+ctx+=+c.getContext("2d");

let+text+=+"Hello+World+\n+Hello+World+2222+\n+AAAAA+\n+thisisaveryveryveryveryveryverylongword.+"
ctx.font+=+"20px+Arial";

fillTextCenter(ctx,+text,+0,+0,+c.width,+c.height)

function+fillTextCenter(ctx,+text,+x,+y,+width,+height)+{
++++ctx.textBaseline+=+'middle';
++++ctx.textAlign+=+"center";

++++const+lines+=+text.match(/[%5E\r\n]%2B/g);
++++for(let+i+=+0;+i+<+lines.length;+i%2B%2B)+{
++++++++let+xL+=+(width+-+x)+/+2
++++++++let+yL+=++y+%2B+(height+/+(lines.length+%2B+1))+*+(i%2B1)

++++++++ctx.fillText(lines[i],+xL,+yL)
++++}
}|code-block|syntax|javascript|785385|<canvas+id="myCanvas"+width="300"+height="150"+style="border:1px+solid+#000;"></canvas>|785386|785387|如果要使文本大小适合画布，还可以选中here|offset|length|785388|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/65433398/5381331^0|0|0|0|0|0|I|4|0|0^^$0|@$1|2|3|4|5|6|7|X|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Y|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|10|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|12|8|@]|9|@$N|13|O|14|1|15]]|A|$]]|$1|P|3|-4|5|6|7|16|8|@]|9|@]|A|$]]]|Q|$R|$5|S|T|U|A|$V|W]]]]

Here is my function to draw multiple lines of text center in canvas (only break the line, don't break-word)
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

let text = "Hello World \n Hello World 2222 \n AAAAA \n thisisaveryveryveryveryveryverylongword. "
ctx.font = "20px Arial";

fillTextCenter(ctx, text, 0, 0, c.width, c.height)

function fillTextCenter(ctx, text, x, y, width, height) {
 ctx.textBaseline = 'middle';
 ctx.textAlign = "center";

 const lines = text.match(/[^\r\n]+/g);
 for(let i = 0; i &lt; lines.length; i++) {
 let xL = (width - x) / 2
 let yL = y + (height / (lines.length + 1)) * (i+1)

 ctx.fillText(lines[i], xL, yL)
 }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id="myCanvas" width="300" height="150" style="border:1px solid #000;"&gt;&lt;/canvas&gt;</code></pre>
</div>
</div>

If you want to fit text size to canvas, you can also check <a href="https://stackoverflow.com/a/65433398/5381331">here</a>

blocks|key|785454|text|有一个维护良好的名为Canvas-Txt的JS库，它能够处理换行符和文本换行。我发现它比这个线程中的所有随机代码片段都更有用。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|785455|entityMap|0|LINK|mutability|MUTABLE|url|https://canvas-txt.geongeorge.com/#/^0|A|A|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

There is a well-maintained JS library called <a href="https://canvas-txt.geongeorge.com/#/" rel="nofollow noreferrer">Canvas-Txt</a> that is able to handle line breaks and text wrapping. I found it much more usable than all the random code snippets in this thread.

I can't seem to be able to add text to a canvas if the text includes "\n". I mean, the line breaks do not show/work.

<pre><code>ctxPaint.fillText("s ome \n \\n &lt;br/&gt; thing", x, y);
</code></pre>

The above code will draw <code>"s ome \n &lt;br/&gt; thing"</code>, on one line. 

Is this a limitation of fillText or am I doing it wrong? the "\n"s are there, and aren't printed, but they don't work either.

HTML5 canvas ctx.fillText won't do line breaks?

jQuery

如果文本包含"\n“，我似乎无法将文本添加到画布。我的意思是，换行符不显示/工作。ctxPaint.fillText("s ome \n \\n thing", x, y);上面的代码将在一行上绘制"s ome \n thing"。这是fillText的局限性，还是我做错了？“\n”在那里，...

问HTML5 canvas ctx.fillText不会换行吗？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5 canvas ctx.fillText不会换行吗？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML5 canvas ctx.fillText不会换行吗？
EN