1

假设我使用了一些 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”。同时我也会研究这两个包。我很陌生。

4

2 回答 2

1

webGL方式：

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

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

于 2013-05-07T18:31:29.317 回答
0

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

编辑：此链接似乎正在将文本转换为实际的 SVG。可能对你没有帮助，抱歉。

于 2013-05-12T04:20:43.823 回答