HTML canvas globalCompositeOperation 屬性

Canvas 對(duì)象參考手冊(cè) Canvas 對(duì)象

實(shí)例

使用不同的 globalCompositeOperation 值繪制矩形。紅色矩形是目標(biāo)圖像，藍(lán)色矩形是源圖像：

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 屬性設(shè)置或返回如何將一個(gè)源（新的）圖像繪制到目標(biāo)（已有的）的圖像上。

源圖像 = 您打算放置到畫(huà)布上的繪圖。

目標(biāo)圖像 = 您已經(jīng)放置在畫(huà)布上的繪圖。

默認(rèn)值： source-over
JavaScript 語(yǔ)法： context.globalCompositeOperation="source-in";

屬性值

值 描述
source-over默認(rèn)。在目標(biāo)圖像上顯示源圖像。
source-atop在目標(biāo)圖像頂部顯示源圖像。源圖像位于目標(biāo)圖像之外的部分是不可見(jiàn)的。
source-in在目標(biāo)圖像中顯示源圖像。只有目標(biāo)圖像之內(nèi)的源圖像部分會(huì)顯示，目標(biāo)圖像是透明的。
source-out在目標(biāo)圖像之外顯示源圖像。只有目標(biāo)圖像之外的源圖像部分會(huì)顯示，目標(biāo)圖像是透明的。
destination-over在源圖像上顯示目標(biāo)圖像。
destination-atop在源圖像頂部顯示目標(biāo)圖像。目標(biāo)圖像位于源圖像之外的部分是不可見(jiàn)的。
destination-in在源圖像中顯示目標(biāo)圖像。只有源圖像之內(nèi)的目標(biāo)圖像部分會(huì)被顯示，源圖像是透明的。
destination-out在源圖像之外顯示目標(biāo)圖像。只有源圖像之外的目標(biāo)圖像部分會(huì)被顯示，源圖像是透明的。
lighter顯示源圖像 + 目標(biāo)圖像。
copy顯示源圖像。忽略目標(biāo)圖像。
xor使用異或操作對(duì)源圖像與目標(biāo)圖像進(jìn)行組合。

實(shí)例

所有 globalCompositeOperation 屬性值：


嘗試一下 ?
Canvas 對(duì)象參考手冊(cè) Canvas 對(duì)象