如何在<canvas>上绘制文本，该文本遵循使用quadraticCurveTo方法绘制的二次曲线</canvas>

Question

是否有任何功能可以让我在二次曲线（使用quadraticCurveTo方法绘制）之后绘制文本？

我只找到了一个允许我在Arc上绘制文字的功能，但这不是我想要的。

在这里你可以看到我的情况的一个例子： http://jsbin.com/ixozok

Answer 1

肯定没有内置方式，但值得注意的是，SVG中很容易做到这一点，因为SVG本身支持在路径上绘制文本。

要在画布中执行此操作，您需要将二次曲线分解为一系列代表曲线的点（例如，实现某些close to this）。你想要的是一个点列表，它是二次曲线的近似值。然后，您沿着此近似值选择要绘制的点，并分别绘制文本的每个字母。要找到任何特定字母的角度，您将获取绘制该字母的点和相邻点，并使用这两个点计算斜率（以及角度）。

它背后的理论并不太难，但我现在制作一个有效的代码示例太过沉重。