html5のキャンバスタグの2DコンテキストglobalCompositeOperationattribute_html/css_WEB-ITnose

定義と使用法

globalCompositeOperation プロパティは、ソース (新しい) イメージをターゲット (既存) イメージ上に描画する方法を設定または返します。

例:

 1 var c=document.getElementById("myCanvas"); 2 var ctx=c.getContext("2d"); 3  4 ctx.fillStyle="red"; 5 ctx.fillRect(20,20,75,50); 6 ctx.globalCompositeOperation="source-over"; 7 ctx.fillStyle="blue"; 8 ctx.fillRect(50,50,75,50); 9 10 ctx.fillStyle="red";11 ctx.fillRect(150,20,75,50);12 ctx.globalCompositeOperation="destination-over";13 ctx.fillStyle="blue";14 ctx.fillRect(180,50,75,50);

ブラウザのサポート

Internet Explorer 9、Firefox、Opera、Chrome、Safari は、globalCompositeOperation 属性をサポートします。

注: Internet Explorer 8 以前は 要素をサポートしていません。

プロパティ値

青: ソース画像 = キャンバスに配置する予定の描画。

赤: ターゲット画像 = キャンバス上に配置した描画。

1.source-over デフォルト。ソース画像を宛先画像の上に表示します。

2.source-in ターゲット画像内にソース画像を表示します。宛先イメージ内のソース イメージの部分のみが表示されます。宛先イメージは透明です。

3.source-out は、ターゲット画像に加えてソース画像を表示します。ソース画像のうちターゲット画像以外の部分のみが表示され、ターゲット画像は透明になります。

4.source-atop は、ソース画像をターゲット画像の上に表示します。ターゲット イメージの外側にあるソース イメージの部分は表示されません。

5.destination-over ソース画像の上に宛先画像を表示します。

6.destination-atop は、ソース画像の上に宛先画像を表示します。ソース画像の外側にあるターゲット画像の部分は表示されません。

7.destination-in ソース画像内の宛先画像を表示します。ソース イメージ内のターゲット イメージの部分のみが表示されます。ソース イメージは透明です。

8.destination-out ソース画像の外側に宛先画像を表示します。ソース イメージの外側のターゲット イメージの部分のみが表示されます。ソース イメージは透明です。

9.lighter はソース画像 + ターゲット画像を表示します。

10.copy ソース画像を表示します。対象画像は無視してください。