ウィザード・コード

HTML5 Canvasのテキストを簡易出力するライブラリ デモページ２

　テキストエディタなどで作成したテンプレートから、テキスト情報を読み取ってHTML5のCanvas要素上にテキストを出力するライブラリです。

Canvas Text Templateの設定方法
Canvas Text Template.js (ver 0.4 14KB)

(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)}おら{ＧＯＫＵＨ！！(b=#FFF,c=#F00,font=50px|"メイリオ","ＭＳ Ｐゴシック")} (c=#333,si=30px,li=25px,in=50px){うっひょおお、(c=#0F0,si=50px,sh=2px 2px 0px #333)}知らねえうちに{(c=#0F0,si=40px)}{世界(c=#0FF,si=40px,sh=4px 4px 4px #333)}が (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=150)このようにテキストを流し込むエリアの横幅を制限することもできます。でも、禁則処理はいまのところ実装していません。（←バージョン０．３以降で実装しました）

記述コードの詳細 var canvas = jQuery('#canvas_text_temp'), ctx = canvas.get(0).getContext('2d'), template = CanvasTextTemp(ctx, { // }); jQuery('#output_text').click(function () { template.clearRect(); template.output(jQuery('#text_box').val(), 0, 30); });

動作確認：　Firefox7.0 Chrome15.0 beta IE9