HTML canvas globalCompositeOperation Propery

例

繪製使用兩種不同globalCompositeOperation值的矩形。紅色矩形的目標圖像 。藍色矩形的源圖像 ：

源過

目的地在

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 Explorer 9中，火狐，歌劇，鉻，和Safari支持掌握globalCompositeOperation屬性。

注：Internet Explorer 8和更早的版本，不支持<canvas>元素。

定義和用法

源（新的）圖像的繪製到目標掌握globalCompositeOperation屬性設置或返回（現有的）圖像。

類=“notranslate”新增源圖像=圖紙您要放置到畫布上。

destination image =那些已經放置在畫布上的圖紙。

默認值：	源過
JavaScript語法：	context.globalCompositeOperation="source-in";

屬性值

值	描述	播放
source-over	默認。顯示源圖像在目標圖像	播放 ”
source-atop	顯示在目標圖像的頂部的源圖像。源圖像的一部分是目標圖像以外的未示出	播放 ”
source-in	顯示到目標圖像的源的圖像。源圖像是內部的目標圖像的僅一部分被示出，並且目標圖像為透明	播放 ”
source-out	顯示源圖像進行目標圖像。源圖像是外目標圖像的僅一部分被示出，並且目標圖像為透明	播放 ”
destination-over	顯示在源圖像的目標圖像	播放 ”
destination-atop	顯示在源圖像的頂端的目標圖像。目標圖像的一部分即源圖像以外未示	播放 ”
destination-in	顯示在源圖像的目標圖像。即INSIDE 源圖像的目標圖像的僅一部分被示出，並且將源圖像是透明的	播放 ”
destination-out	顯示目的地形象出源圖像。即外源圖像的目標圖像的僅一部分被示出，並且將源圖像是透明的	播放 ”
lighter	顯示源圖像 + 目標圖像	播放 ”
copy	顯示源圖像。目標圖像將被忽略	播放 ”
xor	源圖像是通過使用異或與目標圖像合成	播放 ”

例

所有掌握globalCompositeOperation屬性值：

源過來：

源之上：

源中：

源出：

目的地過來：

目的地之上：

目的地在：

目的地出來：

打火機：

複製：

XOR：

試一試»

<HTML畫布參考

HTML 參考

HTML 標籤

HTML canvas globalCompositeOperation Propery

例

瀏覽器支持

定義和用法

屬性值

例