ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Canvasタグの使い方としてよくあるのは画像をはじめとするグラフィックスを描くために用いるというものです。しかし画像を作るのは難しいですし、もっと手軽に利用できると活用できる範囲も広がるはずです。

そこで今回はtxtjsを紹介します。txtjsはテキストをCanvas上に描画するというソフトウェアになります。

txtjsの使い方

こちらは最もシンプルな使い方です。これはテキストではなくCanvas上に描かれています。
こちらは最もシンプルな使い方です。これはテキストではなくCanvas上に描かれています。

フォントサイズ、フォントは自由に選択できます。
フォントサイズ、フォントは自由に選択できます。

指定した枠の中に描画と言った指定もできます。
指定した枠の中に描画と言った指定もできます。

こんな感じに塗りつぶし、描画色の変更も可能です。
こんな感じに塗りつぶし、描画色の変更も可能です。

JavaScriptとの組み合わせも。
JavaScriptとの組み合わせも。

様々なフォント、サイズの組み合わせ。
様々なフォント、サイズの組み合わせ。

こちらはまだテスト版ですが、パスに沿った描画も行えます。
こちらはまだテスト版ですが、パスに沿った描画も行えます。

txtjsはCanvas上に描画しますのでテキストのコピーはできません。画像にテキストを載せたりしているケースがありますが、ああいった表示をJavaScriptで柔軟に変更できる仕組みにもできるでしょう。

txtjsはJavaScript製、BSD Licenseのオープンソース・ソフトウェアです。

txt

diverted247/txt

 

MOONGIFTの関連記事

  • DevRel
  • Com2