ウィザード・コード

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=#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=300)バージョン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)横幅}がその文字分ふくらみます。

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

動作確認：　Firefox11.0 Chrome18.0 IE9