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

最終更新日:2014年12月24日  (初回投稿日:2014年11月30日)

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

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

本日のINDEX
  1. 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

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

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

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

今回のサンプル1は、このような構造になっています。
背景になっている、「雲の写真」と「緑の四角形」が destination
「globalCompositeOperation」を指定した後に描く「黄色い花の切り抜き」が source です。
destinationになる写真や図形には、透明度が50%の部分も作って、効果を見てみました。

↑画像クリックでサンプルが別ウィンドウで開きます。

サンプルのセレクトメニューで「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

ここからは、atop, in, out, over の流れから、ちょっと違った合成です。

先も後も両方表示領域になり、
重なった部分は、グラフィックスが明るく合わさったものに。
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上に「テキスト」を描いてみます。
文字のサイズや縦横の位置指定など、いろいろなプロパティやメソッドがあります。

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.