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

Question

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

Answer 1

这是可能的。

1. 无包装： 您可以使用CanvasRenderingContext2D.measureText() 方法，它接受一个字符串，并返回一个对象{ width: float }。您必须通过使用字体大小进行一些数学运算来找出高度。然后只需以二进制搜索方式枚举字体大小。很快你就会找到最适合画布的尺寸。

2. 包装： 您必须找出字符串中的包装点并自己计算它们的宽度和高度。

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

创建一个 hidden(visibility: hidden not display: none) div，定义它的宽度，然后把你的文本放进去。枚举字体的大小，并检查它是否溢出或增长太高。