HTML5で追加された技術の中でも注目を集めているcanvas。しかしテキストとは違う使い勝手で、使いこなすのが何となく難しそうで敬遠してしまっている人も多いのではないでしょうか。 そこで使ってみたいのがCanvas Text Templateです。テンプレートを使ってCanvasにテキストを出力できるライブラリです。

Canvas Text Templateの使い方

テンプレートは次のような感じになっています。

(c=#333,si=30px,we=bolder,in=80px,li=20px){(c=rgb(255,255,0),fo=italic|50px|"ＭＳ Ｐゴシック", sans-serif,sh=3px 3px 3px #333,le=1.5em)オッス！}おら{(rotate=5,b=#FFF,c=#F00,font=50px|"メイリオ","ＭＳ Ｐゴシック")ＧＯＫＵＨ！！}
(c=#333,si=30px,li=25px,in=50px,rotate=15){(c=#0F0,si=50px,sh=2px 2px 0px #333,ro=-5)うっひょおお、}知らねえうちに{(c=#0FF,si=40px,sh=4px 4px 4px #333,ro=-5)世界}が
(c=#333,si=25px,in=80px,li=30px){(wi=3,c=#F0F,b=rgba(0,0,255,0.5),si=40px,le=1.5em)とんでもねえこと }になってん {(si=40px,b=#FFF,wi=8,c=#00BFFF)ＮＡ}
(c=#000,si=25px,in=30px,li=15px)でも何だか、おら{(si=70px,c=#FFA500,sh=2px 2px 0px #333)ワクワク}してきたぞ！
(c=#333,in=30px,ma=300,ro=10)バージョン0.3から {(wi=3px,c=#FFF,b=#F00,si=25px)禁則処理} に対応しました{(c=#F0F,si=20px,we=bolder)。}横幅を{(c=#FF0,si=20px,we=bolder)制限}したときに、{(c=#0F0,si=18px,we=bolder)もし}次の行頭の文字が{(c=#0FF,si=15px,we=bolder)禁則文字}の場合は前の行の{(c=#F00)行末}に押し込みます。そのため、表示上はその行だけ{(c=#FFF)横幅}がその文字分ふくらみます。

色やサイズ、フォント、回転確度などを定義し文字を書いておくことでcanvasに文字が描画できます。テンプレートなので扱いやすいのが利点です。

JavaScriptは次のようになります。

var canvas = jQuery('#canvas_text_temp'),
  ctx = canvas.get(0).getContext('2d'),
template = CanvasTextTemp(ctx, {
  rotate: -5
});
jQuery('#output_text').click(function () {
  template.clearRect();
  template.input(jQuery('#text_box').val());
  template.output(0, 30);
});

対応ブラウザはIE9以上、Chrome/Firefoxになっています。細かくプログラミングすることなく文字が出力できるのは便利そうです。

Canvas Text TemplateはJavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。

HTML5 Canvasのテキストをテンプレート形式で出力するライブラリ Canvas Text Template ドキュメントページ - ウィザード・コード | WIZARD-CODE