POPSブログ

ブログ記事一覧: canvas

CreateJS Graphicsクラスを拡張 コーナー装飾矩形(Rect)描画

矩形(Rect)のコーナー(四隅)を装飾して描画しますが、Graphicsクラスを拡張してメソッドにする事により、通常のCreateJS Graphicsクラスの書式で記述できる。四隅形状は round bevel notch bite の4種類になります。
easeljs-0.7.1 でのテストです。

≫ 続きを読む

javascript 2014/04/22 pops

CreateJS Graphicsクラスを拡張 Round PolyStar 角丸多角形の描画 2

角丸多角形(Round PolyStar)の描画をGraphicsクラスを拡張して、メソッドにする事により、通常のCreateJS Graphicsクラスの書式で記述できるのが便利である。角丸の描画形式、arcTo()、quadraticCurveTo()、の2つの形式で3種作ってみました。
easeljs-0.7.1 でのテストです。

≫ 続きを読む

javascript 2014/04/18 pops

CreateJS Round PolyStar 角丸多角形の描画

一般的な多角形の描画はCreateJS Graphicsクラスにありますが、角丸多角形は新たに作らねばなりません。GraphicsクラスとCanvasエレメントをBitmap()で表示する、2つの方法で描画してみます。それぞれ quadraticCurveTo()、arcTo()、の2つの形式で描画しますので表現が多彩です。
easeljs-0.7.1 でのテストです。

≫ 続きを読む

javascript 2014/04/12 pops

CreateJS Reflection 鏡面効果

CreateJS で作る、Reflection 鏡面効果です。名前の通り画像などが鏡面に写しだされた様な効果です。画像などをグラフイックのデータ(RGBA PNG32画像)とAlphaMaskFilter処理します。
Textでも結構効果がありますのでテスト的に表示してみました。
easeljs-0.7.1 でのテストです。

≫ 続きを読む

javascript 2014/04/07 pops

CreateJS Chromeでの shadowフィルター と、Opera での drawRoundRect の不具合の修正

CreateJSで、以前から Opera での RoundRect が旨く描画出来ない(Opera Nextは除く)、Graphicsクラス drawRoundRectメソッド の不具合の修正を行なっていますが、より効率的な方法に変更します。
また、Matrix2Dで縮小、beginBitmapFill()処理でChrome陰影切れる不具合の修正も新たな方法を考えました。
easeljs-0.7 でのテストです。

≫ 続きを読む

javascript 2014/03/29 pops

CreateJS Canvasエレメント描画の TextCircle (サークルテキスト)等を作る

CreateJS でCanvasエレメントにHTML5 Canvas仕様で描画したTextCircle (サークルテキスト)等を作り、Bitmapクラスで表示します。Canvasエレメントの色々な使用方法を考えます。
easeljs-0.7 でのテストです。

≫ 続きを読む

javascript 2014/03/23 pops

CreateJS Canvasエレメント描画の3D風テキストを作る

CreateJS でCanvasエレメントにHTML5 Canvas仕様で描画した3D風テキストを作り、Bitmapクラスで表示します。但し完全な3Dでは無く「3Dもどき」に成ります。テキストを画像で染めますので「文字の装飾」が少し多彩に成る。
easeljs-0.7 でのテストです。

≫ 続きを読む

javascript 2014/03/17 pops

CreateJS Canvasエレメント描画のOutlineテキストをBitmapクラスで表示する

CreateJS Textクラスでの「文字の装飾」は現在単に表示する程度で完全ではない。CanvasエレメントにHTML5 Canvas仕様で描画したものを、Bitmapクラスで表示する事により「文字の装飾」が多彩に成る。
勿論、通常の画像もラインの染めの部材に利用できます。Outlineテキストでのテストを行います。
easeljs-0.7 でのテストです。

≫ 続きを読む

javascript 2014/03/14 pops

CreateJS Canvasエレメント描画のWebFontテキストをBitmapクラスで表示する

CreateJS CanvasエレメントにHTML5 Canvas仕様で描画したものは「装飾」等が仕易く且つ画像同様に扱えるので、Bitmapクラスで表示出来ます。WebFontでテキストを描画しましたのでより多様性が有ります。
easeljs-0.7 でのテストです。

≫ 続きを読む

javascript 2014/03/05 pops

CreateJS Canvasエレメント描画のテキストをBitmapクラスで表示する

CreateJS Textクラスでの「文字の装飾」は難しい。よって新たな、CanvasエレメントにHTML5 Canvas仕様で描画したものは「装飾」等が仕易く且つ画像同様に扱えるので、Bitmapクラスで表示する事により「文字の装飾」を行なう試みである。
easeljs-0.7 でのテストです。

≫ 続きを読む

javascript 2014/03/03 pops

ブログ記事一覧

年別アーカイブ一覧



[1]