サイト内検索

globalCompositeOperation プロパティ

構文

context . globalCompositeOperation [ = value ]

現在の合成処理を返します。後述のリストの通りです。

値をセットして、合成処理を変更することができます。未知の値は無視されます。

仕様

globalCompositeOperation 属性は、どのように図形や画像を現存するビットマップ上に描画するのかをセットします。それらは、globalAlpha が与えられると、現在の変換マトリックスが適用されます。この属性値には下記リストの値をセットしなければいけません。下記では、描画元イメージ A はこれからレンダリングしようとしている図形や画像を表し、描画先イメージ B は現在のビットマップ状態を表します。

source-atop
A atop B。描画元イメージのうち、両方のイメージが不透明な部分が表示されます。描画先イメージのうち、描画先イメージが不透明で、描画元イメージが透明な部分が表示されます。それ以外の部分は透明となります。
source-in
A in B。描画元イメージのうち、描画元イメージと描画先イメージともに不透明な部分が表示されます。それ以外の部分は透明となります。
source-out
A out B。描画元イメージのうち、描画元イメージが不透明で、描画先イメージが透明な部分が表示されます。それ以外の部分は透明となります。
source-over (default)
A over B。描画元イメージのうち、描画元イメージが不透明な部分が表示されます。それ以外の部分では描画先イメージが表示されます。
destination-atop
B atop Asource-atop と同じですが、描画元イメージの代わりに描画先イメージを使います。
destination-in
B in Asource-in と同じですが、描画元イメージの代わりに描画先イメージを使います。
destination-out
B out A。source-out と同じですが、描画元イメージの代わりに描画先イメージを使います。
destination-over
B over A。source-over と同じですが、描画元イメージの代わりに描画先イメージを使います。
lighter
A plus B描画元イメージと描画先イメージの重なった部分は、limit として 1 に近づく色の値を使って表示されます。
copy
A (B は無視されます)。描画先イメージの代わりに描画元イメージが表示されます。
xor
A xor B描画元イメージと描画先イメージの排他的論理和となります。
vendorName-operationName
合成演算子のリストにベンダー独自の拡張を加えたい場合は、この構文を使わなければいけません。

これらの値はすべて大文字・小文字を区別しますので、上記の通りに正確に使わなければいけません。ユーザエージェントは上記の値に完全に一致した値のみを認識しなければいけません。

上記リストの演算子は、各説明の最初に掲載された Porter-Duff 演算子の記述の通りに扱われなければいけません (例: A over B)。 [PORTERDUFF]

もしユーザエージェントが指定された値を認識できない場合は無視され、globalCompositeOperation の値は何も変更されず、そのままとなります。

コンテキストが生成されるとき、globalCompositeOperation 属性の値は source-over に初期化されなければいけません。


原文:http://www.w3.org/TR/2010/WD-2dcontext-20100624/#dom-context-2d-globalcompositeoperation

サンプル

globalCompositeOperationプロパティのサンプル

globalCompositeOperationプロパティは、新たに描画したい図形を、すでに描画されている図形と合成するために使います。どのように合成するのかを、globalCompositeOperationプロパティの値にセットします。

上図は、まずcanvas上に青色の矩形を描き、その後、青色の矩形に一部分が重なるように赤色の円を描いたものです。当然、後から描いた赤色の円が、はじめから描かれていた青色の矩形に覆いかぶさるように塗られます。

下図は、赤色の円を描く前に、globalCompositeOperationプロパティに値をセットしたら、どのような結果になるかを表したものです。上の説明における A は赤色の円(対象イメージ)に相当し、B は青色の矩形(描画先イメージ)に相当します。このサンプルでは、結果を分かりやすくするために、各図形にグレーの枠線を描いてあります。

source-atop

source-atopのサンプル

描画先イメージの領域のみが表示されますが、対象イメージと重なっている領域は、対象イメージの領域が表示されます。

source-in

source-inのサンプル

描画先イメージと対象イメージが重なった部分だけが表示されます。表示されるのは描画先イメージの領域です。描画先イメージと対象イメージが重なっていない領域は透明になってしまいます。

source-out

source-outのサンプル

描画先イメージと重なっていない部分だけが表示されます。描画先イメージの領域は透明になってしまいます。

source-over

source-overのサンプル

描画先イメージに対象イメージがかぶさるように表示されます。この合成方法がデフォルトです。globalCompositeOperationプロパティに値をセットしなくても、この合成方法でイメージは描画されます。

destination-atop

destination-atopのサンプル

対象イメージの領域だけが表示されますが、描画先イメージと重なっている領域は、描画先イメージの領域が表示されます。

destination-in

destination-inのサンプル

描画先イメージと対象イメージが重なった部分だけが表示されます。しかし表示されるのは対象イメージの領域です。描画先イメージと対象イメージが重なっていない領域は透明になってしまいます。

destination-out

destination-outのサンプル

描画先イメージから対象イメージの領域が切り取られた状態で表示されます。対象イメージの領域は透明になってしまいます。

destination-over

destination-overのサンプル

対象イメージが描画先イメージの裏に表示されます。

lighter

lighterのサンプル

対象イメージと描画先イメージの両方が表示されますが、重なった領域の色は、それぞれのイメージの色を加算したものとなります。

copy

copyのサンプル

対象イメージだけが表示され、描画先イメージは透明になってしまいます。

xor

xorのサンプル

対象イメージと描画先イメージが重なっていない領域のみが表示され、重なった領域は透明になります。

サンプルコード

以上の結果を取り出すために作ったコードは、以下の通りです。

var oprtns = new Array(
  "source-atop",
  "source-in",
  "source-out",
  "source-over",
  "destination-atop",
  "destination-in",
  "destination-out",
  "destination-over",
  "lighter",
  "copy",
  "xor"
);
for(var i=0; i<=10; i++) {
  var canvas = document.getElementById('c'+i);
  if ( ! canvas || ! canvas.getContext ) { continue; }
  var ctx = canvas.getContext('2d');
  /* 元となるイメージを描画(青色の矩形) */
  ctx.fillStyle = "blue";
  ctx.fillRect(10, 10, 60, 60);
  /* 合成演算子をセット */
  ctx.globalCompositeOperation = oprtns[i];
  /* 対象のイメージを描画(赤色の円) */
  ctx.beginPath();
  ctx.fillStyle = "red";
  ctx.arc(60, 60, 30, 0, Math.PI*2, false);
  ctx.fill();
  /* 補助線 */
  ctx.globalCompositeOperation = "source-over";
  ctx.strokeStyle = "#aaaaaa";
  ctx.strokeRect(10, 10, 60, 60);
  ctx.beginPath();
  ctx.arc(60, 60, 30, 0, Math.PI*2, false);
  ctx.stroke();
}

[globalCompositeOperationプロパティの実際のサンプル]

このコードで、補助線を描く際に、あえてglobalCompositeOperationプロパティに "source-over" をセットしている点に注目してください。

一度、globalCompositeOperationプロパティに値をセットしてしまうと、それ以降に描く図形は、すべて、globalCompositeOperationプロパティの影響を受けてしまいます。そのため、新たに図形を描きたい場合は、globalCompositeOperationプロパティに、デフォルト値である "source-over" をセットします。こうすることで、それ以降は、いつも通りの描画ができるようになります。

ブラウザ対応状況

Firefox
3.6
Safari
5
Chrome
6
Opera
10.60
IE
9
ExplorerCanvas
0002/3
source-atop   ×
何も作用しない
source-in ×
source-atopと同じ結果
×
source-atopと同じ結果
  ×
何も作用しない
source-out ×
xorと同じ結果
×
xorと同じ結果
  ×
何も作用しない
source-over   ×
何も作用しない
destination-atop ×
destination-overと同じ結果
×
destination-overと同じ結果
  ×
何も作用しない
destination-in ×
後に描く図形が表示されない
×
後に描く図形が表示されない
  ×
何も作用しない
destination-out   ×
何も作用しない
destination-over   ×
何も作用しない
lighter   ×
何も作用しない
copy ×
source-overと同じ結果
×
source-overと同じ結果
×
source-overと同じ結果
  ×
何も作用しない
xor   ×
何も作用しない