HTML5 Canvasのテキスト表示を簡易にするライブラリのご紹介
2011/10/11
⇒フォーム内のテンプレートを書き替えてテキストを表示しよう
（最新版のFirefox、Google Chrome、そしてInternetExplorer9で動作します）
このリンクページで「テキスト表示」ボタンを押すと、すでにフォーム内に書かれているテキスト情報を読みとって、テキスト表示を行います。編集はフォームをそのまま書き換えることもできますが、後でコピペするならばテキストエディタで行うことも可能です。テキスト情報はある記法に従って書いていく必要があります。改行はそのまま反映され、各文字列に対して個々にスタイルを設定していくことができます。たとえば、「こんにちは」を赤文字にしたいというときは、{こんにちは(c=#F00)}と書きます。一方で何の装飾もつけないときはそのままこんにちはと書きます。
詳しく説明しますと、文字列に文字色や文字サイズといったスタイル情報を追加するときは、まず文字列を{}で囲みます。次にスタイル情報を文字列の右に()の中に記述することになります。ここでc=#F00というのはcolorを#F00（赤）に変更するという意味です。color=#F00とすることもできます。また、文字サイズを変えたいときは(c=#F00,si=30px)というようにコンマで区切って次のスタイル情報を追加します。
設定できるスタイルは次の通りです。ただし、ブラウザによってはスタイルが適用されない場合があります。
font or fo フォントをまとめて設定
style or st font-styleを設定
variant or v font-variantを設定
weight or w font-weightを設定
size or si font-sizeを設定
family or fa font-familyを設定
color or c 文字色を設定
lineSpacing or li 行間隔を設定
textShadow or ts テキストの影付きにする （例）2px 2px 5px #000
indent or in 文字列のインデントを設定
その他、行単位でスタイルを統一したいときは行頭で()内にスタイルを指定します。
専用のエディタがないので、いまのところ修正がすべて手作業になってしまいますが、そのうちウェブ上で動くエディタも作ってみたいと思います。まだいろいろな意味で雑然としていますが、ドキュメントページをいずれ準備が整い次第公開する予定です。