前回紹介したライブラリを作るにあたって、パクった参考にした先行ライブラリがあります。Canvas Textです。このライブラリはHTML文書のようにタグで囲む記法でテキストを書くだけで、簡単にそれぞれ指定したCSSスタイルをテキストに適用させるものです。ただ、この場合だとクラスを使わないとき
<style=”font-weight:bold;color:#00F”>こんにちは</style>
というように少し長い記述になってしまう点があります。クラスにスタイルを登録しておけばいい話しなのですが、それも少し面倒と考えた自分は、上記のスタイルを適用したテキストを
{こんにちは(c=#00F,we=bold)}
と書けば済むようにしました。Canvas Text Templateという名前のライブラリにすることにしています。
⇒JavaScriptライブラリ Canvas Text Template
なお、前回のコードをかなり書き換えていて、Canvas Text Templateを関数ではなく、コンストラクタとして動作するようにしました。そのため、始めに次のように初期化するコードを書きます。new演算子はつけなくてもエラーにならない親切設計になっています。第1引数にCanvasコンテクストを、第2引数にオプションを指定します。
var template = CanvasTextTemp(canvasContext, {
x: 20,
y: 30
});
スタイルの記法が若干変わりましたので再びまとめます。
font or fo フォントをまとめて設定
style or st font-styleを設定
variant or va font-variantを設定（変更）
weight or we font-weightを設定（変更）
size or si font-sizeを設定
family or fa font-familyを設定
color or c 文字色を設定
border or b 枠線の色を設定（new!）
lineSpacing or li 行間隔を設定
textShadow or sh テキストの影付きにする（変更） （例）sh=2px 2px 5px #000
indent or in 文字列のインデントを設定
⇒Canvas Text Template デモページ
