html - Html テキストを Html5 Canvas に追加する

Question

別のアプリケーションから、ユーザー入力から HTML 形式のテキストを取得しました。(フォント b br ul などでは、1 つのフラグメント内で異なるフォントと色が使用されます)

これをキャンバスに書きたいと思います。

お気に入りcontext.write("<b>Hello</b> World <font...>more text </font>");

これどうやってするの？

Answer 1

まず、必要に応じて、使用しているすべてのフォントをキャンバスで利用できるようにする@font-face必要があります。

次に、テキストを描画するために必要なすべての操作を記述する必要があります。キャンバスは単なる描画面であることを思い出してください。これらの手順を繰り返す必要があります。

1. 使用するフォントを指定します: (CSS フォント プロパティと同じ構文)

   context.font = "12px Arial bold"
   

2. 次の配置場所を知るために描画される文字列を測定します。

   context.measureText(txt).width
   

3. テキストを描画します (塗りつぶしまたは線):

   context.fillText(txt, x, y)
   

Answer 2

これは役立つはずです

https://developer.mozilla.org/en/Drawing_text_using_a_canvas

ただし、html からフォーマットを読み取り、このメソッドを使用して再適用する必要があります。