最近はcanvasタグで表現されたコンテンツも増えてきましたね。canvasタグでは線や図形を簡単に描けます。その時忘れていけないのが「グローバルコンポジオペレーションッ!!」というプロパティの存在です。

globalCompositeOperation とは

canvasにイメージを描く時に重なりあった色をどう処理するかを指定できます。

どういう処理かパッと頭に浮かばないので、実際にサンプルをつくってみた。

globalCompositeOperationのデフォルトとlighterを比較

中央の円とマウスカーソルに追従する円の2つが描画されます。円が重なった時に色はどうなるでしょう?

See the Pen globalCompositeOperation[default] 1

単純に上に色が重なるだけですね。(2つの円の色が近くてわかりにくい時は右下のRERUNで再描画してください。)

globalCompositeOperationにlighterを指定するとどうなるでしょう?

See the Pen globalCompositeOperation[lighter] 1

光が混ざりあい、光の強い中心部は明るくなります。リアルな光の表現がプロパティひとつでできるんです。
色やグラデーションを調整すればブヨッと柔らかそうな火球や、ギラついた光など色んな表現ができます。
パーティクルやキラキラをつくったけどどこかのっぺりしてる。そんな時に使っていきたいですね。

参考サイト

globalCompositeOperation プロパティは以下のサイトが参考になります。

globalCompositeOperation プロパティ

globalCompositeOperation プロパティ

はてブ数

http://www.html5.jp/canvas/ref/property/globalCompositeOperat...

globalCompositeOperation プロパティ

プロパティ値のテスト用

マウスカーソルに追従する円と、複数の円が背景にランダムに描れるサンプル。上部にあるセレクトボックスでglobalCompositeOperationの値を変更して比較できます。

globalCompositeOperationのテスト

globalCompositeOperationのテスト

はてブ数

http://codepen.io/sato4yoshida/full/eNjQZm/

globalCompositeOperationの値でパーティクルがどう変わるかテストできます。

今回の表現に相応しくない値(色がすべて消えるなど)は省いています。