POPSブログ

ブログ記事一覧: html5

CreateJS 複数のWebフォントをサイトにUploadしてCanvasで使用する

「Google Webフォント」もよろしいのですが、自分用の好みのWebフォントを作り、複数のWebフォントをサイトにUploadしてCanvasでの使用表示を試してみました。
表示方法としてCSS3、@font-face を使用する方法と、WebFont Loader を使用する方法の2種類にどんな違いがあるのでしょうか、実際にテストしてみます。

≫ 続きを読む

javascript 2014/08/05 pops

CreateJS Google WebFont OUTLINEテキストアニメのシミュレーション

CreateJS Textクラスで作ったCanvasエレメント描画OUTLINEテキストアニメーションに「Google WebFont」を利用してみました。当然、Fontは変わりますが印象にさほどの変化はありません。
シミュレーションをご覧頂けます。挙動は「前ページ」のものと同じです。easeljs-0.7.1 でのテストです。

≫ 続きを読む

javascript 2014/07/27 pops

CreateJS Canvasエレメント描画OUTLINEテキストを補正しアニメーション

CreateJS Textクラスで作ったOUTLINEテキストにCanvasエレメント描画の画像などで、テキストを装飾しますが、OUTLINEの幅が大きいと文字が壊れるので修正する。
また、CanvasエレメントをBitmap()で表示する場合、Chromeで陰影がつかないのも構造を変えて補正する。
easeljs-0.7.1 でのテストです。

≫ 続きを読む

javascript 2014/07/20 pops

CreateJS Canvasエレメント描画のOUTLINEテキストアニメーション

CreateJS Textクラスで作ったOUTLINEテキストにCanvasエレメント描画の画像などで、テキストを装飾してアニメーション(Tween)させます。OUTLINEテキストはアウトラインの幅だけ大きくなりますので其の点を考慮して作ります。
easeljs-0.7.1 でのテストです。

≫ 続きを読む

javascript 2014/07/15 pops

CreateJS OUTLINEテキストアニメーション

OUTLINEテキストは、easeljs-0.7以降、「CreateJS Textクラス」で作れるようになりました。以前は、OUTLINEテキストをCanvasエレメントで作りBitmap()で表示してましたが、今回は標準のCreateJS Textクラスで作ります。
テキストを重ねて装飾したり、テキストに画像を埋め込み装飾する方法など色々な形式で調べてみます。
easeljs-0.7.1 でのテストです。

≫ 続きを読む

javascript 2014/07/10 pops

CreateJS 大型画像分割(スライス) 2重DOORタイプ MENU

DOORタイプのエフェクトの下に中間層を置き、DOORと同じ大きさの角形を少し時間差を付けてスライドさせた。スライド方向を「対角 左右 上下」の 4DOOR 2DOOR のみに限定する。少し前であるが、TVのCMに有ったと思う。一応「MENU」としての利用を目的としていますので(使える程度の代物)、画像読み込み失敗時のエラー処理もしました。TOPページでの使用を想定した構造、構成となります。
easeljs-0.7.1 でのテストです。

≫ 続きを読む

javascript 2014/06/26 pops

CreateJS 大型画像 ダブルスライド形式 MENU

大型画像が2枚一体となり「スライド」する、いわゆるダブルスライド(Slider)ですが、スライド方向を「左右上下」にも変更出来ます。一応「MENU」としての利用を目的としていますので(使える程度の代物)、画像読み込み失敗時のエラー処理もしました。TOPページでの使用を想定した構造、構成となります。
easeljs-0.7.1 でのテストです。

≫ 続きを読む

javascript 2014/06/23 pops

CreateJS 大型画像 Carouselタイプ(Slider) MENU

大型画像が一体となり「左右にスライド」する、いわゆるCarouselタイプ(Slider)ですが「上下にスライド」する設定にも変更出来ます。一応「MENU」としての利用を目的としていますので(使える程度の代物)、画像読み込み失敗時のエラー処理もしました。TOPページでの使用を想定した構造、構成となります。
easeljs-0.7.1 でのテストです。

≫ 続きを読む

javascript 2014/06/19 pops

CreateJS 大型画像スライス DOORタイプ MENU

大型画像の画像分割、DOOR 形式の画像エフェクトと「MENU」の組み合わせです。原則、2x2、x2x1、1x2分割の 4DOOR 2DOOR になります。一応「MENU」としての利用を目的としていますので(使える程度の代物)、画像読み込み失敗時のエラー処理もしました。TOPページでの使用を想定した構造、構成となります。
easeljs-0.7.1 でのテストです。

≫ 続きを読む

javascript 2014/06/18 pops

CreateJS 大型画像Transition MENU

大型画像の Transition Mask 形式の画像エフェクトと「MENU」の組み合わせです。原則、正方形で構成しますが、円形、角丸四角形、四角形のマスクが可能です。一応「MENU」としての利用を目的としていますので(使える程度の代物)、画像読み込み失敗時のエラー処理もしました。TOPページでの使用を想定した構造、構成となります。
easeljs-0.7.1 でのテストです。

≫ 続きを読む

javascript 2014/06/15 pops

ブログ記事一覧

年別アーカイブ一覧



[1]