POPSブログ

jQuery,ActionScript.BaserCMS & Blog




CreateJS ステージのキャプチャーと複数コンテナを合成し画像に変換

CreateJSで、SVGはcanvgで画像変換されていますので、当然キャプチャー可能ですが、一応テストしてみます。あわせて、cacheCanvas、getCacheDataURL()、などを使用してのステージのキャプチャー、任意の複数画像、コンテナ、などの合成テストも行ってみました。
easeljs-0.7.1 でのテストです。

≫ 続きを読む

javascript 2014/09/20 pops

CreateJS canvgでSVGをラスター画像に変換してBitmap表示

CreateJSで、直接SVGを表示することは可能ですが、canvg.jsを使用して一旦SVGをラスター画像に変換してCreateJSのBitmapクラスで表示して見ます。ChromeでBitmapクラスでの陰影処理に不具合がありますがその修正も考慮してみます。
easeljs-0.7.1 でのテストです。

≫ 続きを読む

javascript 2014/09/02 pops

CreateJS 日本語WebフォントとSVGの表示

CreateJSで、日本語Webフォントと Inkscapeで作ったSVGをローダーで読み込み表示します。
easeljs-0.7.1 でのテストです。

≫ 続きを読む

javascript 2014/08/27 pops

CreateJS 日本語Webフォントの表示

日本語Webフォントを表示する場合に読み込み容量を減らすため必要なフォントのみのSubsetファイルを作ります。利用できる日本語Webフォントと事前の処理、表示方法などを探ります。
easeljs-0.7.1 でのテストです。

≫ 続きを読む

javascript 2014/08/23 pops

CreateJS フォントマスクと、Webフォントテキストアニメーション2

WebフォントテキストアニメーションとをGraphicsクラスで描画するフォントマスクの組み合わせです。デザイン変更には有効ですから、シミュレーションも付けてみました。
easeljs-0.7.1 でのテストです。

≫ 続きを読む

javascript 2014/08/17 pops

CreateJS フォントをGraphicsクラスで描画する

基本的に、現在CreateJSでフォントをGraphicsクラスで描画する事は出来ませんが InkscapeとInk2canvasでフォントをコンテキスト(ctx)の形式に変換してGraphicsクラスで描画する事は可能です。付随作業と多少の制約はありますがテストしてみます。

≫ 続きを読む

javascript 2014/08/12 pops

CreateJS @font-face 形式で、Webフォントの描画が壊れる時の修正

CreateJSで@font-face 形式でWebフォントを読み込んだ場合、テキストの装飾を行うと、直接html5 Canvas処理のコンテキストのFontがWebフォントにならない場合があります。CreateJS TextClassの処理は正常なのですが、修正方法を考えて見ます。

≫ 続きを読む

javascript 2014/08/07 pops

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

ブログ記事一覧



[1]