POPS WEB KOUBOU

CreateJS Canvasエレメント描画のOutlineテキストアニメ シミュレーション (WebFont)

HTML5-DEMO-097c


DEMO: CreateJS Canvasエレメント描画のOutlineテキスト(WebFont)アニメのシミュレーション


設定を変更して、ステージ「CLICK」ボタンを押してください。(STAGE背景色切替はシミュレーション一番下の段に移動)

 

[ Accordion-Bar open / close ]

▼ LOGO-TEXT 操作

● LOGO1デザイン切替 ●Line切替 : 表示 非表示

●Base切替 : 表示 非表示

●Line幅 : 1 2 3 4

LOGO1 Font切替 : Impact Arial Serif Erica Archivo Varela Flamenco Fanwood :初期値 Impact(以外Bold)

テキスト間隔切替 : -20 -10 -5 0 5 10 20 :初期値 0、テキストスペース

LOGO1 画像切替 : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 / グラデ画像 G1 G2 G3 :初期値 15

画像透明度の切替 : 1 0.8 0.5 0.3:初期値 1、注意、10.15番画像はアルファチャンネル画像のため透明度1で実行されます

SHADOW切替 ●陰影 : TRUE FALSE

●画像陰影 : TRUE FALSE / 初期値 TRUE.FALSE、画像陰影に注意

SHADOW色切替 :                 :初期値 黒色

OutLine色切替 :                       :初期値 白色

TEXT虹色指定切替 : 虹色 指定色 :初期値 虹色、(BaseのTEXTです)

TEXT指定色切替 :                       :初期値 濃ピンク、(BaseのTEXTです)


▼ MAIN-TEXT 操作

MAIN-TEXT Font切替 : Arial Impact Serif Erica Archivo Varela Flamenco Fanwood :初期値 Arial

● MAIN-TEXT 画像切替 : 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 / グラデ画像 G1 G2 G3 :初期値 2

MAIN-TEXT虹色指定切替 : 虹色 指定色 :初期値 指定色、

●Base切替 : 表示 非表示

●陰影 : TRUE FALSE

●Line幅 : 1 2

MAIN-TEXT指定色切替2 :                       :初期値 濃ピンク。

陰影つきの「Baseテキスト」はアニメーション後に表示します。(Base表示にすれば変わらない)


▼ STAGE 背景操作

ステージ背景切替 ●表示切替 : 表示 非表示

●背景画像 : 背景1 背景2 背景3 背景4 背景5 / 透過グラデ G1 G2 G3 :すぐに実行。

背景色 :                               :すぐに実行

「透過グラデ画像」と「背景色」の組み合わせでグラデーション背景を表現できます。


/// 設定変更は次回アニメーションより実行されます。ステージの「CLICK」ボタンを押してください ///

 

 

CreateJS、Canvasエレメント描画のOutlineテキストアニメ(createJS097.js)のシミュレーションです。「Google WebFont」を利用してみました。

easeljs-0.7.1.jsを使用しています。