[69-7] Canvas上の重なった描画領域を指定しよう （globalCompositeOperationプロパティ）

<canvas>上の図形の重なった部分をどう描画するかを指定することができるのが「globalCompositeOperation」プロパティ。
図形だけでなく、テキストや画像など何でも、とにかくcanvas上に描かれたものの重なり部分を操作します。

下の（先に描いた）図形だけを描画する、上の（後に描いた）図形だけを描画する...などいろいろ選べます。半透明の図形を使えば、おもしろい表現もできます。
今回は「globalCompositeOperation」の値を全部試してみました。

本日のINDEX

1. globalCompositeOperationプロパティで重なった描画領域の指定をする
2. globalCompositeOperation の値を全部試してみる
   1. source-atop
   2. source-in
   3. source-out
   4. source-over（デフォルト）
   5. destination-atop
   6. destination-in
   7. destination-out
   8. destination-over
   9. lighter
   10. copy
   11. xor
3. 上に描くグラフィックス（source）が複数だと

globalCompositeOperationプロパティで重なった描画領域の指定をする

「globalCompositeOperation」プロパティは、その値（value）によって、
先に描いてあったグラフィックス（destination）と、後から描くグラフィックス（source）の「合成部分（重なり合った部分）」がどのように表示されるかが決まります。

context名 . globalCompositeOperation = ' value（合成のタイプ） ' というカタチで使います。（例えば、ctx1.globalCompositeOperation = 'source-in'; とか）

今回のサンプル1は、このような構造になっています。
（クリックでサンプルが別ウィンドウで開きます）

背景になっている、「雲の写真」と「緑の四角形」が destination。
「雲の写真」はコレ↓　「緑の四角形」は Canvasで描いています。

destinationになる写真や図形には透明度が50％の部分も作って、効果を見てみました。

「globalCompositeOperation」を指定した後に描く「黄色い花」が source です。
「黄色い花」の画像はコレ↓ 背景は透明な PNGファイルです。

サンプルのセレクトメニューで「globalCompositeOperation」のタイプを選択して、
合成の様子をみてください。

globalCompositeOperation の値を全部試してみる

source-atop

先に描いてあったグラフィックス（destination）が表示領域になり、
後から描くグラフィックス（source）は、重なった部分のみが表示されます。

destination（先）が半透明の場合は、source（後）も半透明になります。

function draw1() {
    var cnvs1 = document.getElementById('canvas1');
    var ctx1 = cnvs1.getContext('2d');
/*グラフィックス（destination）の描画 */
    ctx1.drawImage(rect1,210,10,180,180);
    ctx1.drawImage(rect2,10,10,180,180);
/*合成タイプ*/    
    ctx1.globalCompositeOperation = 'source-atop'; 
/*上にのせるグラフィックス（source）を描画*/
    ctx1.drawImage(rect3, 0, 0);
}

source-in

重なった部分が表示領域になり、後から描くグラフィックス（source）だけが表示されます。

やはり、destination（先）が半透明なら、source（後）も半透明に表示されますね。

/*合成タイプ*/   
    ctx1.globalCompositeOperation = 'source-in'; 

source-out

重なっていない部分が表示領域になり、後から描くグラフィックス（source）だけが表示されます。

ここでもdestination（先）が半透明なら、source（後）も半透明に表示されます。
destination がまったく無い部分の source は100％の表示になっていますね。

/*合成タイプ*/ 
    ctx1.globalCompositeOperation = 'source-out'; 

source-over（デフォルト）

先も後も両方表示領域になり、後から描くグラフィックス（source）が上にのっかって表示されます。そのまんまです。

これがデフォルト。
つまり、このプロパティの指定を省略するとコレになっているってこと。

/*合成タイプ*/ 
    ctx1.globalCompositeOperation = 'source-over'; 

destination-atop

ここからは、「表示領域」と「表示されるモノ」、destination（先）と、source（後）が入れ替わるかんじです。

後から描くグラフィックス（source）が表示領域になり、先に描いてあったグラフィックス（destination）は、 重なった部分のみが表示されます。

destination（先）が半透明の部分は、source（後）にかぶって表示されています。
destination（先）が無い部分だけ、source（後）は100％になっています。

/*合成タイプ*/ 
    ctx1.globalCompositeOperation = 'destination-atop'; 

destination-in

重なった部分が表示領域になり、destination（先）だけが表示されます。

重なっていない部分は、両方とも表示されていませんね。

/*合成タイプ*/ 
    ctx1.globalCompositeOperation = 'destination-in'; 

destination-out

重なっていない部分が表示領域になり、destination（先）だけが表示されます。

source（後）が100％不透明なので、destination にスパっと source（後）のカタチの穴が開いたかんじです。

/*合成タイプ*/ 
    ctx1.globalCompositeOperation = 'destination-out'; 

destination-over

先も後も両方表示領域になり、destination（先）が上にのっかって表示されます。

デフォルトの「source-over」とレイヤーが入れ替わったかんじです。

/*合成タイプ*/ 
    ctx1.globalCompositeOperation = 'destination-over'; 

lighter

ここからは、今までの流れから、ちょっと違った合成です。

先も後も両方表示領域になり、重なった部分は、グラフィックスが明るく合わさったものに。
Photoshop の「覆い焼き（リニア）」のようなかんじになります。

/*合成タイプ*/ 
    ctx1.globalCompositeOperation = 'lighter'; 

copy

これは一目瞭然。
destination（先）などおかまい無しに source（後）のみ表示されます。
ある時点で背景を無しにしたい場合などに便利かも。

/*合成タイプ*/ 
    ctx1.globalCompositeOperation = 'copy'; 

xor

これはちょっと変わり種。
destination（先）も、source（後）も表示されますが、重なった部分のみ非表示です。

「xor（エックスオア）」とは、「eXclusive OR」の略で、排他的論理和と言われる、論理演算の1つだそうです。

/*合成タイプ*/ 
    ctx1.globalCompositeOperation = 'xor'; 

上に描くグラフィックス（source）が複数だと

サンプル2では、上にのせるグラフィックスに、テキストも追加してみました。
（↓画像は、destination-atop の場合）
クリックでサンプルが別ウィンドウで開きます。

こちらもすべての値を試せるサンプルを作っていますのでご覧ください。

このサンプルで、globalCompositeOperation は、1度指定すると、そのあとのグラフィクス全部に影響することがわかります。
まず花の画像に、次にテキストに、と言った具合で、順次「合成のタイプ」が適用されます。

次回予告

今回のサンプル2でも使ってみましたが、次回は Canvas上に「テキスト」を描いてみます。文字のサイズや縦横の位置指定など、いろいろなプロパティやメソッドがあります。