WIZ-CODE.blog

JavaScriptやAjaxをテーマとしたブログです。

*

HTML5のCanvasでテキスト表示するライブラリ(その3)

   

Canvas Text Templateの新しいバージョンを作りました。文字間隔の調整や行幅の指定が行えるようになっています。また、次のようにCanvasTextTempを呼び出すとき、グローバルオプションとして、maxWidth、lineWidth、border、color、fontStyle、fontVariant……、lineSpacing、indent、textShadow、letterSpacingを指定することができます。これらは行単位あるいはフレーズ単位でスタイル指定がなかったときに適用されるスタイルになります。

var template = CanvasTextTemp(canvasContext, {
	maxWidth: 500,
	indent: '20px'
});

なお、次のように初期化した後にグローバルオプションを変更することもできます。

template.setGlobalStyle({
	maxWidth: 100,
	indent: '50px'
});

バージョン0.2から、テキスト表示位置をoutputメソッドの引数に指定する方法に変更しました。第1引数にテキスト内容、第2引数にx座標、第3引数にy座標を入れます。座標は省略可能です。また、clearRectメソッドはCanvasの同名メソッドを引数なしで行えるメソッドです。

template.clearRect();  
template.output(content, 0, 30);

スクリプトのダウンロードとデモページCanvas Text Template.js (ver 0.2 9.5KB)デモページ2 テキストエリアを書き替えてテストできます 新しく使用可能になったスタイル letterSpacing or le 文字間隔を指定する(単位はemmaxWidth or ma テキスト全体あるいは行の横幅を指定する

 - JavaScript/Ajax , , ,