使用HTML5画布将自定义信封轮廓拟合或变形文本（或图像）

Question

假设我使用了一些HTML5标记：

<canvas id="e" width="400" height="200"></canvas>
<script>
  var canvas = document.getElementById("e");
  var context = canvas.getContext("2d");
  context.fillStyle = "red";
  context.font = "bold 72px JerseyLetters";
  context.fillText("Bulls", 50, 100);
</script>

制作一些很酷的文字：

然后我决定将这些字母放入一个看起来像这样的信封中：

希望得到这样的东西：

我将如何进行（1）定义上面的信封，然后（2）使用HTML5 Canvas将文本放入信封中以获得结果？

我愿意直接在信封中放置文字或首先创建图像的解决方案，然后将图像放入信封中。

谢谢！

修改

我在@markE的建议下将标签“webgl”和“three.js”添加到了这个问题中。我也将在同一时间研究这两个包。我很新。

Answer 1

webGL方式：

使用像素着色器进行图像处理。 使用2d画布渲染文本，使用缓冲区绑定webGL纹理并使用画布图像（渲染文本）填充纹理。准备好的信封实际上映射了信封所包含的区域，并且每个像素都扮演了第一张图像的UV坐标角色。将其作为像素着色器运行，您将拥有待挤压图像和信封（uvs），您将输出最终图像。这样，它完全独立于字体和文本。您甚至可以更多地进行一个图像处理步骤，这样您就可以加载任何信封形状并在现场处理它，因此它变得独立于字体，文本和信封形状。

我不确定我解释得有多好。 但希望这会有所帮助。

Answer 2

SVG提供这​​些文本转换。见http://tavmjong.free.fr/SVG/TEXT_PATH/TextPath.html

编辑：此链接似乎是将文本转换为实际的SVG。对不起，可能不会对你有所帮助。