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

Question

我想使用戶inputed文本心臟形的容器內的（是的，情人節馬上就要來了...）請注意，這需要在這樣的CSS解決方案被裁定輸出出。

• 如果存在任何解決方案/庫設置爲文本的容器形狀我希望能得到指點他們

• 如果不是文本塑造的解決方案，然後我想簡單的有一個長方形的盒子，我只是縮小文本，直到它符合...我怎麼衡量文本是否在一個盒子上適合

澄清：在心臟形邊緣文本換行。

文字是動態的。

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

Answer 1

在你做任何事之前，問問你自己SVG在這裏是否會更合適。

遺憾的是沒有內置的方式說「使其適合這種規模。」通常你必須選擇字體大小，重新測量和重做。還有一個更好的方法，但首先該怎麼辦字體的方法：

一種方法是選擇一個猜測，說50pt和測量的文本。如果太大，請嘗試49pt並重新測量。如果它仍然太大，請嘗試48點，等等。

另一種方法是挑選一個猜測，比如50pt。如果它太大，請將它剪成一半到25pt。太大了？將它再次減半至12點。太小？加一半得到18pt等，直到你足夠接近。如果你研究過算法，這聽起來可能很熟悉。 :)

第二種方法是使用畫布的比例。我們是幸運的，在畫布上的文字scales gracefully.

我假定你有什麼不是一個單一的句子，但文本塊。足夠好。在畫布上寫出文本塊並測量它的寬度和高度。一旦你得到了這個，你可以使用ctx.scale來適當縮放它以適應任何尺寸。