HTML5 canvas ctx.fillText 不会换行吗? [英] HTML5 canvas ctx.fillText won't do line breaks?
问题描述
如果文本包含 ",我似乎无法向画布添加文本.我的意思是,换行符不显示/工作.
I can't seem to be able to add text to a canvas if the text includes " ". I mean, the line breaks do not show/work.
ctxPaint.fillText("s ome
\n <br/> thing", x, y);
上面的代码将在一行上绘制s ome
.
thing"
The above code will draw "s ome
<br/> thing"
, on one line.
这是fillText的限制还是我做错了? "在那里,不会被打印出来,但它们也不起作用.
Is this a limitation of fillText or am I doing it wrong? the " "s are there, and aren't printed, but they don't work either.
推荐答案
恐怕是 Canvas 的 fillText
的限制.没有多线支持.更糟糕的是,没有内置的方法来测量线高,只有宽度,让自己更难!
I'm afraid it is a limitation of Canvas' fillText
. 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!
很多人都编写了自己的多线支持,其中最著名的项目可能是 Mozilla Skywriter.
A lot of people have written their own multi-line support, perhaps the most notable project that has is Mozilla Skywriter.
您需要做的要点是多次 fillText
调用,同时每次都将文本的高度添加到 y 值.(我相信,测量 M 的宽度是 Skywriter 人们用来近似文本的方法.)
The gist of what you'll need to do is multiple fillText
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.)
这篇关于HTML5 canvas ctx.fillText 不会换行吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!