Canvasに改行しながらテキスト描画するJavaScriptコード例

JavaScriptにて次を実現したい。

  • 複数行のテキストがある
  • それをCanvas要素に描画したい
  • ただし改行をしながら

Canvasにはテキスト描画APIがあるけど……
複数行描画するようなメソッドはありません。

少しだけ工夫が必要になってきます。

そこでJSで改行込みでテキスト描画する方法
その方法とかJavaScriptコード例などを紹介します。

初めに複数行を文字列配列に分割(split)する

下準備として複数行を分割します。

改行コードでsplitすればいいだけです。

▼ 例えば次のように複数行テキスト分割

▼ コンソール出力結果

ここまでが改行しながらテキスト描画する下準備

改行は  \n  /  \r  /  \r\n  のどれかだから、
それを正規表現としてsplitしているだけです。

テキストの幅・高さに合わせてcanvasリサイズ

次にテキスト全体にcanvas要素をリサイズさせます。

※ この部分はなくてもOK

そのために以下の手順を踏むことにしました

  • テキスト行の最大幅を求める
  • テキスト高さを求める
  • それに合わせてcanvasをリサイズ

具体的には次のようなコードです。

▼ こういうコード例

何をしているかはコメントを参照

仮想的なspan要素にテキストの各行を代入し、それをbodyに一時的に突っ込んで span.offsetWidth span.offsetHeight  から各行の最大幅・高さを求めてます。

この部分はcanvasにテキストをピッタリ納めるため

もし必要ないなら上記処理はいりません。

改行しながらテキスト行をcanvasに描画

最後に改行しながらテキスト描画していきます。

▼ このようなコード例

各変数は先ほどのコードででてきた変数と同じです。

テキスト描画には c tx.fillText(line, x, y)  を使うだけなので、改行するために y += maxHeight  として描画位置を変更しています

テキスト改行描画する全体のJSコード例

最後にここまでの全体コードを載せておきます。

▼ 分かりやすく関数化してみた

▼ 例えば次のように使える

こういった風に複数行描画が可能

以上、JavaScriptでCanvasに複数行描画でした。

少しだけ工夫が必要なことに注意です。

Shareこの記事をシェアしよう!

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください