渲染<canvas>文本中arbitarily形矢量容器

Question

我想使用户inputed文本心脏形的容器内的（是的，情人节马上就要来了...）请注意，这需要在这样的CSS解决方案被裁定输出出。

• 如果存在任何解决方案/库设置为文本的容器形状我希望能得到指点他们

• 如果不是文本塑造的解决方案，然后我想简单的有一个长方形的盒子，我只是缩小文本，直到它符合...我怎么衡量文本是否在一个盒子上适合

澄清：在心脏形边缘文本换行。

文字是动态的。

SVG等是accetable只要我能画在帆布上。

Answer 1

在你做任何事之前，问问你自己SVG在这里是否会更合适。

遗憾的是没有内置的方式说“使其适合这种规模。”通常你必须选择字体大小，重新测量和重做。还有一个更好的方法，但首先该怎么办字体的方法：

一种方法是选择一个猜测，说50pt和测量的文本。如果太大，请尝试49pt并重新测量。如果它仍然太大，请尝试48点，等等。

另一种方法是挑选一个猜测，比如50pt。如果它太大，请将它剪成一半到25pt。太大了？将它再次减半至12点。太小？加一半得到18pt等，直到你足够接近。如果你研究过算法，这听起来可能很熟悉。 :)

第二种方法是使用画布的比例。我们是幸运的，在画布上的文字scales gracefully.

我假定你有什么不是一个单一的句子，但文本块。足够好。在画布上写出文本块并测量它的宽度和高度。一旦你得到了这个，你可以使用ctx.scale来适当缩放它以适应任何尺寸。