Canvasを使えばDOMとはまったく違うグラフィックスを描けます。しかしDOMやCSSとは異なる使い方なので、適切に描くのに苦労することも多いでしょう。そういうときには最適なライブラリを使うのが一番です。 今回紹介するpng-font.jsはピクセルアートなテキストを出力できるライブラリです。

png-font.jsの使い方

出力例です。日本語、英語、韓国語など多彩に使えます。

JavaScriptから簡単に文字を出力できます。

png-font.jsを使えば例えばドット絵アートや8bitゲームのようなUIにテキスト情報を簡単に表示できます。綺麗に出力されるだけのテキストとはまた異なる雰囲気があります。利用できる場面は多そうです。

png-font.jsはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

png-font.js demo! ericoporto/png-font: draw pixelart text in js canvas, easily!