無料ブログはココログ

« [HTML5] fillTextを使わずに文字を出力してみる3(影付き) | トップページ | [iPhone4] SONY DRC-BT30P Bluetooth ワイヤレスオーディオレシーバー(更新) »

[HTML5] CharaGene.js のプロパティ: fillTextを使わずに文字を出力してみる4

ある程度ライブラリ化ができました。正式配布用のアーカイブは後日作成予定ですが、ひとまず公開します。JavaScriptはBSDライセンス同等、フォントはM+FONTに従います。

Charagene_demo
ここをクリックすると実行できます。

CharaGeneをnewする際にフォントのイメージと設定を指定します。Canvasのコンテキストと同じように、あらかじめプロパティを設定しておいてputText()を実行します。影やボーダには別の色のフォントをオープンして、そのオブジェクトを設定してかららフラグをtrue後にputText()を実行します(影は同じオブジェクトを設定してもかまいません)。

どのような表示ができるかを、プロパティで説明します。<>内はデフォルト値です。

影付き
    shadowFlag: 影付き文字モード(true/false)<false>
    shadowX: 影のX方向のずれ(ピクセル数)<3>
    shadowY: 影のY方向のずれ(ピクセル数)<3>
    shadowAlpha: 影の濃さ(globalAlphaの値)<0.2>
    shadowCG: 影用のフォント(CharaGeneオブジェクト)<undefined>

ボーダー(ふちどり)
    borderFlag: ボーダーモード(true/false)<false>
    borderX: ボーダーのX方向のずれ(ピクセル数)<1>
    borderY: ボーダーのY方向のずれ(ピクセル数)<1>
    borderCG: ボーダーのフォント(CharaGeneオブジェクト)<undefined>

太字
    boldFlag: 太字モード(true/false)<false>
    boldX: 太字のX方向のずれ(ピクセル数)<1>

イタリック   
    itaricFlag: イタリックモード(true/false)<false>

表示位置
    textBaseline: Y位置("top"/"middle"/"bottom")<"top">
    textAlign: X位置("start"/"left"/"center"/"end"/"right")<"start">

拡大縮小
    rateX: X方向の倍率(1)
    rateY: Y方向の倍率(1)

« [HTML5] fillTextを使わずに文字を出力してみる3(影付き) | トップページ | [iPhone4] SONY DRC-BT30P Bluetooth ワイヤレスオーディオレシーバー(更新) »

ソフトウェア」カテゴリの記事

パソコン・インターネット」カテゴリの記事

プログラミング」カテゴリの記事

コメント

コメントを書く

コメントは記事投稿者が公開するまで表示されません。

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/138594/49106998

この記事へのトラックバック一覧です: [HTML5] CharaGene.js のプロパティ: fillTextを使わずに文字を出力してみる4:

« [HTML5] fillTextを使わずに文字を出力してみる3(影付き) | トップページ | [iPhone4] SONY DRC-BT30P Bluetooth ワイヤレスオーディオレシーバー(更新) »