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

Question

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

Answer 1

这是可能的。

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

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

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

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