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」を追加しました。その間、これら 2 つのパッケージについても調査します。私はに非常に新しいです。

4

2 に答える 2

1

webGL の方法:

ピクセルシェーダーによる画像処理として行います。2D キャンバスでテキストをレンダリングし、webGL テクスチャをバッファでバインドし、キャンバス イメージ (レンダリングされたテキスト) でテクスチャを塗りつぶします。エンベロープが保持する領域を実際にマッピングするエンベロープを準備し、すべてのピクセルが最初の画像の UV 座標の役割を果たします。これをピクセル シェーダーとして実行すると、スクイーズするイメージと最終イメージを出力するエンベロープ (UV) が得られます。そうすれば、フォントとテキストに完全に依存しません。画像処理のステップを 1 つ増やして、任意の封筒の形状を読み込んでその場で処理できるようにすることもできます。これにより、フォント、テキスト、および封筒の形状に依存しなくなります。

これをどれだけうまく説明できたかわかりません。ただし、これが役立つことを願っています。

于 2013-05-07T18:31:29.317 に答える
0

SVG は、この種のテキスト変換を提供します。http://tavmjong.free.fr/SVG/TEXT_PATH/TextPath.htmlを参照してください。

編集: このリンクは、テキストを実際の SVG に変換しているようです。参考にならないかもしれません、すみません。

于 2013-05-12T04:20:43.823 に答える