スタートページJavascriptCANVAS

globalCompositeOperation 画像の重なり


globalCompositeOperation は、キャンバスで前の画像(赤)と追加画像(青)に重なり合う領域があるとき、どの領域を表示するかの多様な方法を提供します。
● xycoordinate 環境では、下記の機能しか使えません。
ソースコードを示します。ア・イが表示方法を指定しています。
  // 前の画像(赤)
drawRect(0,200, 150,50, "red", 1, "red");   // 画像合成形式の指定
  ctx.globalCompositeOperation = "source-atop"; // ア
  // 追加画像(青)
  drawRect(50,150, 200,0, "black", 1, "blue");
  // 標準に戻す
  ctx.globalCompositeOperation = "source-over"; // イ

前の画像(赤)と追加画像(青)画像の位置関係:離れている=0、重なっている=1
通常の表示(省略時)
前の領域のみ。重なる領域は追加画像
前の重ならない領域のみ
前の画像が前面になる
重なった部分は加法混色。明るくなる
重なった部分は減法混色。暗くなる
重ならない領域のみ