例
二つの異なるglobalCompositeOperation値を使用して四角形を描画します。 赤い長方形があるdestination images 。 ブルーの長方形はsource images ：
ソースオーバー
先オーバー
JavaScriptを：
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(20,20,75,50);
ctx.globalCompositeOperation="source-over";
ctx.fillStyle="blue";
ctx.fillRect(50,50,75,50);
ctx.fillStyle="red";
ctx.fillRect(150,20,75,50);
ctx.globalCompositeOperation="destination-over";
ctx.fillStyle="blue";
ctx.fillRect(180,50,75,50);
»それを自分で試してみてください ブラウザのサポート
表中の数字は完全にプロパティをサポートする最初のブラウザのバージョンを指定します。
| プロパティ | |||||
|---|---|---|---|---|---|
| globalCompositeOperation | 4.0 | 9.0 | 3.6 | 4.0 | 10.1 |
定義と使用法
globalCompositeOperationプロパティセットまたはソース方法戻る(new)画像を先に描画されている(existing)画像。
元画像=図面は、キャンバス上に配置しようとしています。
宛先イメージ=既にキャンバス上に配置されている図面。
| デフォルト値： | ソースオーバー |
|---|---|
| JavaScriptシンタックス： | context .globalCompositeOperation="source-in"; |
プロパティ値
| 値 | 説明 | それを再生します |
|---|---|---|
| source-over | デフォルト。 先の画像の上にソースイメージを表示 | それを再生します» |
| source-atop | 先の画像の上にソース画像を表示します。 一部のsource imageの外にあるdestination image示されていません | それを再生します» |
| source-in | 先の画像にして元画像を表示します。 一部だけsource image内にあるdestination image示され、そしてdestination image透明です | それを再生します» |
| source-out | 先の画像のうち、 元画像を表示します。 一部だけsource imageの外側にあるdestination image示され、そしてdestination image透明です | それを再生します» |
| destination-over | 元画像の上に先の画像を表示します | それを再生します» |
| destination-atop | 元画像の上に先の画像を表示します。 一部のdestination imageの外にあるsource image示されていません | それを再生します» |
| destination-in | 元画像への宛先の画像を表示します。 一部のみdestination image内にあるsource image示されており、 source image透明です | それを再生します» |
| destination-out | 元画像のうち、 先の画像を表示します。 一部のみをdestination imageの外側にあるsource image示されており、 source image透明です | それを再生します» |
| lighter | 元画像 + 先の画像を表示します | それを再生します» |
| copy | 元画像を表示します。 先の画像は無視されます | それを再生します» |
| xor | ソース画像は、排他的に使用するか、 デスティネーション画像に合成されます | それを再生します» |
<Canvasオブジェクト