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

【问题标题】：How can I draw text on <canvas>, that follows a Quadratic Curve drawn using the quadraticCurveTo method如何在 <canvas> 上绘制文本，该文本遵循使用 quadraticCurveTo 方法绘制的二次曲线
【发布时间】：2012-01-02 01:11:19
【问题描述】：

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

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

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

【问题讨论】：

我在原始帖子上添加了一个链接，以便您查看我的情况示例。

标签： javascript html canvas

【解决方案1】：

当然没有内置方法，但值得注意的是，这在 SVG 中很容易做到，因为 SVG 本身就支持在路径上绘制文本。

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

它背后的理论并不难，但对于我来说，现在制作一个有效的代码示例太庞大了。

【讨论】：

你说得对，SVG 让它看起来很简单，但尝试在画布中实现时，我意识到它需要的数学流利程度略高于平均水平。