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

Question

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

Answer 1

这是可能的。

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

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

但有一种更简单的方法可以做到这一点。

创建一个隐藏（visibility：hidden not display：none）div，定义其宽度，并将文本放入其中。枚举字体的大小，并检查它是否溢出或增长得太高。