HTML canvas globalCompositeOperationプロパティ

Canvas 对象参考手册Canvas オブジェクト

例

異なる globalCompositeOperation 値を使用して矩形を描画します。赤い矩形はターゲット画像、青い矩形はソース画像：

source-over
destination-over
YourbrowserdoesnotsupporttheHTML5canvastag.

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

試してみる »

ブラウザサポート

Internet ExplorerFirefoxOperaGoogle ChromeSafari

Internet Explorer 9、Firefox、Opera、Chrome、Safari は globalCompositeOperation プロパティをサポートしています。

注意：Internet Explorer 8 以前のバージョンは <canvas> 要素をサポートしていません。

定義と使い方

globalCompositeOperation プロパティは、ソース（新しい）画像をターゲット（既存の）画像に描画する方法を設定または返します。

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

ターゲット画像 =すでにキャンバスに配置されている描画。

デフォルト値： source-over
JavaScript 構文： context.globalCompositeOperation="source-in";

プロパティ値

值 説明
source-over デフォルト。ターゲット画像の上に表示ソース画像。
source-atop にターゲット画像の上に表示ソース画像。ソース画像のうち、ターゲット画像の外側にある部分は見えません。
source-in にターゲット画像内に表示ソース画像。のみターゲット画像の内側のソース画像部分が表示され、ターゲット画像は透明です。
source-out にターゲット画像の外に表示ソース画像。のみターゲット画像の外側のソース画像部分が表示され、ターゲット画像は透明です。
destination-over にソース画像の上に表示ターゲット画像。
destination-atop にソース画像の上に表示ターゲット画像。ターゲット画像のうち、ソース画像の外側にある部分は見えません。
destination-in にソース画像内に表示ターゲット画像。のみソース画像の内側のターゲット画像部分が表示され、ソース画像は透明です。
destination-out にソース画像の外に表示ターゲット画像。のみソース画像の外側のターゲット画像部分が表示され、ソース画像は透明です。
lighter 表示ソース画像 + ターゲット画像。
copy 表示ソース画像。無視するターゲット画像。
xor XOR操作を使用してソース画像ととターゲット画像を組み合わせます。

例

すべての globalCompositeOperation プロパティ値：


試してみる »

Canvas 对象参考手册Canvas オブジェクト

その他の拡張