HTML5 Canvasのテキストを簡易出力するライブラリ Canvas Text Template
Canvas Text Template.jsが新機能を追加してバージョンアップしました。こちらのブログで紹介しています。
テキストや文字の出力に特化したライブラリです。HTML5のCanvas APIを使用し、テキストと適用されるスタイルの内容をテンプレートから 読み取ってCanvas要素上に出力します。
Canvas Text Templateは他のライブラリに依存せず単独で動きます。Canvas APIを使用しているため、同APIをサポートしていないブラウザでは動作しません。 ただし、Internet Explorerのバージョン6-8については、FlashCanvasを使用することで問題なく動作します。
デモページ
⇒フォームに文字を入力してテストしてみよう！
⇒文字間隔の調整や行の横幅指定など新機能を追加
⇒禁則処理も行う仕様に
⇒テキストを回転処理を加えることも
ダウンロードページ
Canvas Text Template.js（ベータ版ver 0.4 14KB）
修正箇所や新機能についてはバージョン履歴をご覧ください。
＜旧バージョン＞
Canvas Text Template.js（ベータ版ver 0.3 12KB）
Canvas Text Template.js（ベータ版ver 0.2 9KB）
Canvas Text Template.js（ベータ版ver 0.1 5KB）
設置の仕方
Canvas Text Template.jsはライブラリ依存がないので、基本的に上記のJavaScriptファイルをアップロードしてページ内に埋め込めば準備完了です。 Internet Explorer（9を除く）ユーザーの利用者に対応するならば、FlashCanvasをアップロードして次のように記述します。
HEADタグ内の記述例
次にCanvas要素をHTML内に記述して描画エリアを確保します。Canvas要素には、属性値のid（ID名は任意です）、width、 heightプロパティ（これらはCSSスタイルではありません）が必要です。
それではスクリプトの記述部分に入ります。Canvas Text Templateライブラリを呼び出す前にまず、Canvas APIを利用できるように getContextメソッドでCanvasコンテキストの参照を取得しておきます。Canvas Text Templateコンストラクタには、 第1引数にCanvasコンテキストの参照が必須のためです。FlashCanvasが利用可能ならば、下記のように条件分岐して取得するのがいいでしょう。
Canvasコンテキストの参照が取得できたら、CanvasTextTempコンストラクタで初期化を行います。後でメソッド等を使用できるようインスタンスを変数に入れておきます。 通常コンストラクタはnew演算子をつけて呼び出しますが、Canvas Text Templateはnew演算子なしでも動作する親切設計になっています。 第1引数に前述のCanvasコンテキストの参照を渡し、第2引数に任意でオプションをハッシュ形式で渡します。
初期化の際に指定できるのはグローバルオプションです。グローバルオプションはテキスト全体のレイアウトやスタイルに適用されます。指定できるオプションは以下の通りです。
maxWidth……テキストが表示されるエリアの横幅を指定します。一行の横幅が指定の幅を超えると自動的に改行されます。デフォルトは制限なしです。
lineWidth……文字の枠線の太さを指定します。デフォルトは5です。
border……文字の枠線の色を指定します。デフォルトでは枠線が透明になっているため、枠線が表示されないようになっています。
color……文字の塗りつぶし色を指定します。デフォルトは黒です。
fontStyle……font-styleを指定します。デフォルトは"normal"です。
fontVariant……font-variantを指定します。デフォルトは"normal"です。
fontWeight……font-weightを指定します。デフォルトは400です。
fontSize……文字サイズを指定します。単位はpx（ピクセル）で、デフォルトは13pxです。
fontFamily……フォントファミリーを指定します。デフォルトは"ＭＳ Ｐゴシック", sans-serifです。
lineSpacing……上下の行の間隔を調整します。単位はpx（ピクセル）で、デフォルトは5pxです。
indent……行のインデント幅を指定します。単位はpx（ピクセル）で、デフォルトは0pxです。
textShadow……テキストや文字に影をつけます。デフォルトは影なし（0px 0px 0px rgba(0,0,0,0)）です。
letterSpacing……文字の間隔を調整します。単位はemで、デフォルトは0.1emです。
rotate（ver 0.4から）……テキストに回転効果を付加します。単位は度数で0～360の整数を指定します。デフォルトは0です。
グローバルオプションは初期化の後でも、setGlobalStyle()メソッドを使うことでスタイルを上書きできます。
Canvas要素にテキストを出力するには、output()メソッドを使います。第1引数にテンプレート化したテキスト、第2引数にx座標、第3引数にy座標を入れます。 座標は省略可能です。また、clearRect()メソッドはCanvasの同名メソッドと同じ効果を持ちますが、引数なしで行えるメリットがあります。
テンプレートの記法
Canvas Text Templateライブラリでは、テキストをある一定の記法で書くことで、簡単にテキストにスタイルを適用することができます。まずは一例を見ていきましょう。
テンプレート例１
このテキスト内容には改行が含まれています。Canvas Text Templateは改行がそのまま反映されるようになっているので、output()メソッドで出力すると 次のように表示されるはずです。
おはよう世界さん
こんにちは世界さん
こんばんは世界さん
改行が反映されるので使い方によっては、複数行のテキストを入力できるテキストエリア・フォームの内容をそのままCanvas要素に反映させることもできます。 デモページでは実際にそのようにテキストエリアを利用しています。
しかし、このテキストにはスタイルが適用されていません。平文にスタイルを適用させるには、あらかじめグローバルオプションでスタイル等を指定する必要があります。 仮にグローバルオプションで文字サイズを30px、文字色を赤とそれぞれ指定していたならば、表示は次のようになるはずです。
おはよう世界さん
こんにちは世界さん
こんばんは世界さん
全体にスタイルが適用されていますがテキスト自体は非常に見づらいですね。こういう派手な装飾を全体に適用させることはあまりないと思います。 そのためグローバルオプションでは通常、全体に適用されてもいいような基本的で控えめなスタイルを指定します。
次の例はスタイルを一部に限定するやり方です。行の先頭に小かっこ()をつけて、その中にスタイルを記述しています。
テンプレート例２
テンプレート例２の表示結果は次のようになります。
おはよう世界さん
こんにちは世界さん
こんばんは世界さん
このように行頭で小かっこ()内にスタイルを指定すると、その行だけにスタイルが適用されます。そのため、行単位で細かくスタイル設定をすることができます。 設定したいスタイルが複数あるときはコンマ(,)で区切って書きます。スタイルの記法については後述します。
さらに範囲を限定して、各文字ごとにスタイルを設定したいというときは次のように記述します。
テンプレート例３
テンプレート例３の表示結果は次のようになります。
おはよう世界さん
こんにちは世界さん
こんばんは世界さん
各文字列にスタイルを適用するには、まず中かっこ{}で文字列を囲み、さらに小かっこ()を文字列の前か後ろに挿入し、
行単位のスタイル指定と同じようにその中にスタイルを記述します。
※ver 0.3から中かっこ{}内の文字列とスタイルの順序は任意になりました。
テンプレート内にスタイルを記述する場合、記法がグローバルオプションのときと異なることに注意が必要です。小かっこ()内の記法は、 スタイル名=値(,) です。 また、スタイル名の多くは省略形が用意されていて、たとえば文字色を指定するとき、color=#F00としてもいいのですが、c=#F00と省略することも可能です。 以下に指定できるオプション/スタイル名とその省略形を示しておきます。
maxWidth……maxWidth、あるいはma （行単位の指定のみ有効）
lineWidth……lineWidth、あるいはwi
border……border、あるいはb
color……color、あるいはc
fontStyle……fontStyle、あるいはst
fontVariant……fontVariant、あるいはva
fontWeight……fontWeight、あるいはwe
fontSize……fontSize、あるいはsi
fontFamily……fontFamily、あるいはfa
lineSpacing……lineSpacing、あるいはli
indent……indent、あるいはin
textShadow……textShadow、あるいはsh
letterSpacing……letterSpacing、あるいはle
rotate……rotate、あるいはro （ver 0.4から）
バージョン情報
2011/10/11 ver 0.1
最初のバージョン。
2011/10/18 ver 0.2
maxWidth、letterSpacingプロパティを追加。
2012/04/18 ver 0.3
禁則処理を追加。
2012/05/10 ver 0.4
rotateプロパティを追加。
動作確認： Firefox11.0 Chrome18.0 IE9
※このプラグインはまだ開発中のベータ版です。不具合等ありましたら、ブログやメール等でお知らせください。