如何在<canvas>上繪製文本，該文本遵循使用quadraticCurveTo方法繪製的二次曲線

Question

是否有任何允許我繪製文本的功能，它遵循二次曲線（使用quadraticCurveTo方法繪製）？

我只找到一個函數，允許我在Arc上繪製文本，但這不是我想要的。

在這裏你都可以看到我的情況爲例： http://jsbin.com/ixozok

Answer 1

有肯定沒有內置的方式，但它值得指出的是，這是很容易在SVG做，因爲SVG本身支持路徑上繪製文本。

要在畫布中做到這一點，你需要將你的二次曲線分解成一系列代表曲線的點（通過執行close to this）。你想要的是一個近似於二次曲線的點列表。然後，沿着這個近似值選取要繪製的點，並逐個繪製文本的每個字母。要找出任何特定字母的角度，您需要將您正在繪製該字母的點與相鄰點相關聯，並使用這兩點來計算斜率（從而計算角度）。

它背後的理論並不難，但對我來說現在做出一個有效的代碼示例太重要了。