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 "\n". I mean, the line breaks do not show/work.

ctxPaint.fillText("s  ome \n \\n <br/> thing", x, y);

上面的代码将绘制 > thing，在一行上。

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

这是fillText的限制还是我做错了？

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.

推荐答案

我在这里没有打印， 恐怕它是Canvas的fillText的限制。没有多线支持。更糟糕的是，没有内置的方法来测量线高，只有宽度，让自己更难做！

I'm afraid it 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的宽度是人们做的近似文本，我相信。）

The jist 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屋！