javascript - 有没有办法使用 html5 canvas 的 fillText 方法将文本放入不可见的文本框中？

Question

我正在制作一个 HTML5 游戏，我需要一种以文本方式告知玩家事情的方法。我想使用 fillText 方法将文本放入此框中：

现在，我只知道如何在一行中呈现文本，但这显然还不够，因为需要有换行符才能使文本适合。有没有办法快速做到这一点，还是我必须自己编码？

这是消息在游戏中的样子：

Answer 1

查看规范，如果您只想使用画布，则必须自己做。

为此，您需要使用measureText来获取文本的大小并手动拆分它。但这似乎很麻烦。

我发现另一个更优雅的解决方案是使用 HTML 覆盖。用于此的 HTML 可能如下所示：

<div id="outer" syle="position:relative">
   <canvas id='myCanvas'/>
   <div id="textualDiv" syle="position:absolute"></div>
</div>

textualDiv然后，您将根据需要进行定位，并在需要时进行填充。之后，您只需将其隐藏即可。并在需要时再次显示。