図形の重なり具合を指定するには？
解説
Canvasでは、２つ以上の図形が重なったときの、透明度や論理的な合成の方法を指定することができます。
【透明度】
globalAlphaプロパティを使うと、以降に描画する図形の透明度を指定することができます。
値には0～1までの数値を指定します。0が完全な透明、1が不透明です。
以下の例では、透明度を0.5にして赤い四角形と青い四角形を重ね合わせています。
context.globalAlpha = 0.5;
context.fillStyle = "red";
context.fillRect(20,20,80,60);
context.fillStyle = "blue";
context.fillRect(40,40,80,60);
なお透明度は、fillStyleプロパティやstrokeStyleプロパティにrgba形式で値を代入することでも指定できます。詳しくは、「線や塗りつぶしの色を指定するには？」を参照してください。
【合成方法の指定】
globalCompositeOperationプロパティを使うと、以降に描画する図形の合成方法（オペレーション）を指定することができます。
値としては次のいずれかの文字列を指定します。
| "source-atop" | 下地の画像の透明でない部分にのみ、新しい画像を描画します |
| "source-in" | 下地の画像と重なった部分にのみ、新しい画像を描画します |
| "source-out" | 下地の画像と重ならなかった部分にのみ、新しい画像を描画します |
| "source-over" | 下地の画像に重ねて新しい画像を描画します（既定値） |
| "destination-atop" | 新しい画像の透明でない部分のみ、下地の画像が残ります |
| "destination-in" | 新しい画像と重なった部分のみ、下地の画像が残ります |
| "destination-out" | 新しい画像と重ならなかった部分のみ、下地の画像が残ります |
| "destination-over" | 下地の画像の裏に新しい画像を描画します |
| "lighter" | 下地の画像と新しい画像が重なった部分は、色が加算されて（明るく）描画されます |
| "copy" | 下地の画像は透明になり、新しい画像のみが描画されます |
| "xor" | 下地の画像と新しい画像が重なった部分は、透明になります |
以下に、各合成方法の例を示します。
なお、同じCanvas上に描画すると、それまで描画した画像を消去してしまう合成方法もあるため、id値として"fig0"～"fig10"を持つ、11個のcanvas要素にそれぞれ描画しています。
// オペレーションの定義
var oprations = 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<oprations.length; i++) {
var canvas = document.getElementById("fig"+i);
if (canvas.getContext) {
var ctx = canvas.getContext('2d');
ctx.fillStyle = "red";
ctx.fillRect(10,10,25,20);
ctx.globalCompositeOperation = oprations[i];
ctx.fillStyle = "blue";
ctx.fillRect(20,20,25,20);
// 枠線
ctx.globalCompositeOperation = "source-over";
ctx.strokeRect(10,10,25,20);
ctx.strokeRect(20,20,25,20);
}
}
元の画像と新しい画像の位置がわかるように枠線を描いていますが、その前に既定値の"source-over"を指定していることに注意してください。
関連項目
Canvasとは
線や塗りつぶしの色を指定するには？
