サイト内検索

globalCompositeOperation プロパティ

実行結果

source-atop

期待する結果 実際の結果
source-atop

source-in

期待する結果 実際の結果
source-in

source-out

期待する結果 実際の結果
source-out

source-over

期待する結果 実際の結果
source-over

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();
}