HTML5のCanvasでテキスト表示する Canvas Text Templateリニューアル

前回のAjax認証とは別の話になりますが、Webサイトのテキストに視覚効果を与える技術に、Text Shadowがあります。WebサイトでText Shadowを実装するのにいくつか方法がありますが、もっともポピュラーなのがCSS3を用いた方法です。SVGも独自のドロップシャドウ効果を実装している他、HTML5のCanvasでもそれは実装できます。また、CSS3について言えば、最新ブラウザでほぼすべての機能が実装されていて、IEバージョン9以下に実装していない機能が多いことを除けば、大部分のユーザーがWebサイトの視覚効果を体験できるようになっています。

実際のところ、CSS3さえあればテキストの視覚効果を実装するには十分でしょう。確かにHTML5のいち機能であるCanvasにも図形描画の他にテキスト描画機能があります。しかし、最近ほとんどのブラウザでCanvasのテキスト描画機能がサポートされたとはいえ、その処理機能はとても貧弱です。複数行のテキストを表示できないといった問題から、フォントの種類とサイズを同時に指定しないといけない不便な仕様の他に、Canvasには文字間を調整する、CSSでいうletter-spacing機能が存在しないという欠点があります。フォントによってデフォルトの文字間だと文字の間が狭まっていて見にくい種類があり大変不便です。

これでは素のAPIじゃ相手にならない、というかこれを使って何かやろうという気が起こらないのではないですか。これに比べると、アニメーションも自由自在のCSS3が輝いて見えますね。

ただし、Canvas用のライブラリを見てみると、EaselJSというのがテキスト表示機能を含めて、非常に充実した機能を備えています。テキストアニメーションも得意であるらしく、兄弟ライブラリにはサウンド系のやプリロード系のライブラリがあります。またEaselJSのライブラリにTxt.jsというライブラリがあり、これには文字の並びを弧の字に変形する機能などがあります。一方でこれらは、ゲームなどのグラフィック系コンテンツのためのツールであるととらえた方がいいのではないでしょうか。

多くのサイトを見ていると、CSS3エフェクト全開なサイトはまだ珍しい方だし、随所でアニメーションしているサイトはさらに少ないわけで、これら派手なエフェクトやアニメーションはまだWebサイト必須の技術とはなっていないと感じます。

また、このライブラリを少しかじったところ、日本語の改行がうまくいかないという問題があったり、出力するテキストのフォントやスタイルがすべて同じで、ある単語やフレーズだけ変えることが難しいそうです。「そこで」ではないですが、

自分が以前作成したCanvas Text Template.jsというのがあります。実はオープンソースの紹介サイトMOONGIFTで知らないうちに紹介されていました。ありがたいことであります。そして、今回このCanvas Text Template.jsをリメイクすることにしまして、これまでに使っていて変だなおかしいなと感じたところを改善、テンプレートの書式も新たに設定し直しました。日本語の改行にもちろん対応しています。また、単語/フレーズ単位で細かくスタイルを決められるようになっています。ただし、以前のバージョンとは互換性がなく、前に使用していたテンプレートはそのままでは動きませんのでご了承ください。

変更点と改善点

• 書式の変更（後述）。たとえば、Text Shadowの省略形はshでしたが、新バージョンではtsになりました。
• 機能の追加。グラデーション機能を追加しました。
• 不具合などの修正。半角の{}()[]をテキストとして記述するときの回避方法。テキストの変形（移動・回転・拡大）の順序。
• テンプレとは別に一行のテキストを即時出力する、quickEffect()メソッドを追加。見出しや画像にちょこっとのせる短いテキストを簡易に出力できます。
• JavaScriptで関数型プログラミングをサポートする軽量ライブラリのUnderscore.js（圧縮版は約6KB）に依存します。このライブラリはこちらのサイトでダウンロードできます。JavaScriptで様々なデータ処理をするときに役立つライブラリです。RubyやAjax黎明期に多く利用され、jQueryとの戦いに敗れて後に化石化したPrototype.jsとよく似たメソッドを持ちます。

テキストに適用するスタイルは三つのレベルに分かれていて、文章全体に効果のあるグローバルスタイル、行単位で有効になるラインスタイル、個々の単語やフレーズごとに有効になるフレーズスタイルがあります。これは前バージョンの仕様と同じです。そして、これらのうちグローバルスタイルは、CanvasTextTemplateを初期化するとき、ハッシュ形式で第2引数に指定します。このため、グローバルスタイルはテンプレートに記述することはありません。一方、ラインスタイルとフレーズスタイルは、テンプレート内に記述する形になります。文章全体でよく使うスタイルをグローバルスタイルまたはそれより下位のラインスタイルに記述することで、もっとも下位のフレーズスタイルで指定するスタイル数を減らすことができます。

CanvasTextTemplateの実行方法

var canvas, context, cvTxtTemp;
canvas = $('#test1');
context = canvas.get(0).getContext('2d');
/* ここまで描画コンテキスト取得の過程 */

/* ライブラリの実行 */
cvTxtTemp = new CanvasTextTemplate(context, globalStyle); //引数にコンテキストを指定
cvTxtTemp.input('WIZARD-CODE'); //表示するテキスト（複数行可）を指定
cvTxtTemp.output(0, 0, 800); //表示座標(x, y)と描画される幅を指定

グローバルスタイルで指定可能なプロパティ

maxWidth……廃止しました。テキスト表示幅はoutput()メソッド実行時に指定する形になりました。
lineWidth……文字の枠線の太さを指定します。デフォルトは1です。
border……文字の枠線の色を指定します。デフォルトでは枠線が透明になっているため、枠線が表示されないようになっています。
color……文字の塗りつぶし色を指定します。デフォルトは黒です。
fontStyle……font-styleを指定します。デフォルトは””（空文字）=normalです。
fontVariant……廃止しました。
fontWeight……font-weightを指定します。デフォルトは””（空文字）=normalです。 fontSize……文字サイズを指定します。単位は数値で”px”表記は不要になりました。デフォルトは10です。
fontFamily……フォントファミリーを指定します。
lineSpacing => lineHeight……プロパティ名をlineHeightに変更。行の縦の間隔を調整します。単位はフォントの高さを基準にした倍数で、デフォルトは1.0です。
indent => textIndent……行のインデント幅を指定します。単位は数値でデフォルトは0です。
textShadow……それぞれshadowOffsetXやshadowOffsetYといったCanvasのAPIのプロパティ名で指定する方法に変更。
letterSpacing……文字の間隔を調整します。単位は数値で指定。文字サイズ基準ではなくピクセル数に変更。デフォルトは0です。
translate……新規プロパティ。テキストの表示位置をピクセル単位で変更します。第1引数がX座標の移動量、第2引数がY座標の移動量でコンマで区切ります。整数を指定します。デフォルトは0,0です。
rotate……テキストに回転効果を付加します。しかし、テキストの左上を基準に回転するため、そのままでは実用性がありません。そこでtextAlignをcenterにすると、単一行で単一スタイルのテンプレートであればテキストの中心位置から回転するスタイルに変えられます。単位は度数で0～360の整数を指定します。デフォルトは0です。
scale……新規プロパティ。テキストを拡大縮小します。第1要素にX方向の縮尺、第2要素にY方向の縮尺を整数で指定します。デフォルトは1, 1です。 textAlign……新規プロパティ。テキストの描画位置を指定します。デフォルトはstartで左から描画されます。centerにすると、複数のフレーズや複数行にわたるテキストの場合表示が崩れますが、単一の行でスタイルも単一であると、テキストの中心部分から描画され、結果としてテキストの配置が描画開始位置を中心に左右に均等になります。
textBaseline……新規プロパティ。フォントの縦の描画位置を決めます。デフォルトのideographicはフォントの底の部分を基準の描画なので、テキスト表示位置のY座標を指定しない場合、Canvas画面の上に文字が隠れてしまうためY方向の調整が必要です。これはtopに指定することでも解決できます。

ラインスタイルとフレーズスタイルのプロパティの書式

border……border、あるいはb
color……color、あるいはc
fontStyle……fontStyle、あるいはst
fontVariant……fontVariant、あるいはva => 廃止しました。
fontWeight……fontWeight、あるいはwe => fw
fontSize……fontSize、あるいはsi => fs
fontFamily……fontFamily、あるいはfa => ff
lineHeight……lineSpacing => lineHeight、あるいはli => lh
textIndent……indent => textIndent、あるいはin => ti
textShadow……textShadow、あるいはsh => ts
letterSpacing……letterSpacing、あるいはle => ls
translate……translate、あるいはtr
rotate……rotate、あるいはro
scale……scale、あるいはsc
textAlign……textAlign、あるいはta
textBaseline……textBaseline、あるいはtb

テンプレートの書式と変更箇所

大きな変更点は各プロパティを仕切る記号が”,“から”|“になったことです。

{(c=#000|ts=1,1,2,#333|lh=1.5)オッス、おらゴクウ}

カラーの記述方法はredとAzureといったカラー名、16進数のカラーコード（例：#333333）、RGB(A)形式（例：rgb(255,0,0)、rgba(255, 255,255,.7)）があります。

{(c=#000)オッス、{(color=rgb(255,255,0))おらゴクウ}}

複数の値が要求されるプロパティは、コンマ(,)で区切ります。

{(ts=1,1,2,#333|sc=1,2|gr=-180,0,150,0|gs=1,.85,.67,.5,.33,.16,0|gc=#f00,#f0f,#00f,#0ff,#0f0,#ff0,#f00)オッス、おらゴクウ}

text-shadowプロパティを指定するときは、引数の順番が影のX座標、Y座標、ぼかしの強さ、カラーとなりますぼかしの強さとカラーは省略可能です。グラデーション機能を使用するには三つのプロパティを必ず指定しなければならず、まずgrまたはgradientCoordsに始点座標(X0, Y0)と終点座標(X1, Y1)を入れ（例：gr=0,0,300,0）、次にgsまたはgradStopsにグラデーション範囲を0-1の数値で指定、そしてgcまたはgradColorsにgradStopsで区切った数ぶんのカラーを指定します。
このグラデーションの指定方法はCanvasのAPIに沿ったもので、各用語についてはこちらのサイトに詳しく説明されています。ちなみにこのライブラリは、グラデーションの種類を線形のみサポートしています。

デモページ: http://wiz-code.digick.jp/ajax/demo1.canvas-text-template.html

ダウンロード: Canvas Text Template.js version 1.0 (27KB)

ダウンロード（圧縮版）: Canvas Text Template.js version 1.0 (10KB)

 - JavaScript/Ajax Canvas, Canvas Text Template, HTML5