如何在画布上绘制适合给定矩形的文本？

Question

我正在使用canvas创建一些图像。 我想在给定的矩形（即偏移x，偏移y，宽度和高度）上在画布上绘制文本，并使该文本尽可能大而不会溢出，如果可能的话，还要进行自动换行。这是可能的吗？

- konikos

Answer 1

这是可能的。

1. 无换行：

   您可以使用CanvasRenderingContext2D.measureText()方法，该方法接受一个字符串，并返回一个对象{width: float}。您需要通过使用字体大小进行一些计算来找出高度。然后以二分搜索的方式枚举字体大小，很快就能找到最适合canvas的大小。

2. 换行：

   您需要找出字符串中的换行点，并自己计算它们的宽度和高度。

但是有一种更好更简单的方法来做到这一点。

创建一个隐藏的（可见性：hidden而不是display:none）div，定义其宽度，并将文本放入其中。枚举字体大小，检查是否溢出或增长过高。

- xiaoyi