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