POPS WEB KOUBOU

CreateJS PNG画像の陰影処理

HTML5-DEMO-107


DEMO: CreateJS 透過PNG画像の中の部分に陰影処理して表示 (createJS107.js)


PNG画像の透過部分に「Blurフィルター」でぼかし陰影処理します。Chromeでも同じ表示になります。ステージ「Click」で背景画像 ON/OFF

 

 

下はステージ2「透過PNG画像陰影テスト」、(1) 340x80画像、 (2) 308x66画像、/ Chrome(Opera)は陰影NG


 

 

ステージ1

「左上」ドロップシャドウなし、PNG画像の透過部分には陰影が付きませんのでCanvasエレメントで陰影を作り合成表示します。

「右下」ドロップシャドウ有り、PNG画像の作りによって処理が違いますが、多少見栄えを替えることが可能になります。
「中央」ドロップシャドウ有り、そのままで表示。拡大(2.5)していますので、画像のため品質はよくない。
多少なり制約はありますが、上記のテストの様になります。読み込み画像は下記に表示してあります。


ステージ2

透過PNG画像に直接陰影処理した例です。Chrome(Opera)は陰影が付かない汚い表示になります。


easeljs-0.7.1.jsを使用しています。一応はCanvasの描画という事ですからFlashの表現に近くしています。動作は、HTML5、Canvas対応ブラウザに限定されます。


 

 

ドロップシャドウ付きの画像はCanvasでもドロップシャドウ付きの状態で表示します。(中央の例)

中のテキスト部分は画像の大きさの内側に余裕を取って配置している事に注意ください。

textimg01.png 340x50、ドロップシャドウ

welcome32.png 340x80

welcome32_shadow.png 340x80、ドロップシャドウ

welcome32_2.png 308x66、余白ほぼ無し

 

 

 

[ サンプル使用画像の表示 ]

 

 

詳細は記事のページを参照ください。