HTML 5 canvas globalCompositeOperation 屬性
實(shí)例
使用不同的 globalCompositeOperation 值繪制矩形。紅色矩形是目標(biāo)圖像。藍(lán)色矩形是源圖像：
source-over destination-over
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、Firefox、Opera、Chrome 以及 Safari 支持 globalCompositeOperation 屬性。
注釋：Internet Explorer 8 以及更早的版本不支持 <canvas> 元素。
定義和用法
globalCompositeOperation 屬性設(shè)置或返回如何將一個(gè)源（新的）圖像繪制到目標(biāo)（已有）的圖像上。
源圖像 = 您打算放置到畫布上的繪圖。
目標(biāo)圖像 = 您已經(jīng)放置在畫布上的繪圖。
| 默認(rèn)值： | source-over |
|---|---|
| JavaScript 語法： | context.globalCompositeOperation="source-in"; |
屬性值
| 值 | 描述 |
|---|---|
| source-over | 默認(rèn)。在目標(biāo)圖像上顯示源圖像。 |
| source-atop | 在目標(biāo)圖像頂部顯示源圖像。源圖像位于目標(biāo)圖像之外的部分是不可見的。 |
| source-in | 在目標(biāo)圖像中顯示源圖像。只有目標(biāo)圖像內(nèi)的源圖像部分會(huì)顯示，目標(biāo)圖像是透明的。 |
| source-out | 在目標(biāo)圖像之外顯示源圖像。只會(huì)顯示目標(biāo)圖像之外源圖像部分，目標(biāo)圖像是透明的。 |
| destination-over | 在源圖像上方顯示目標(biāo)圖像。 |
| destination-atop | 在源圖像頂部顯示目標(biāo)圖像。源圖像之外的目標(biāo)圖像部分不會(huì)被顯示。 |
| destination-in | 在源圖像中顯示目標(biāo)圖像。只有源圖像內(nèi)的目標(biāo)圖像部分會(huì)被顯示，源圖像是透明的。 |
| destination-out | 在源圖像外顯示目標(biāo)圖像。只有源圖像外的目標(biāo)圖像部分會(huì)被顯示，源圖像是透明的。 |
| lighter | 顯示源圖像 + 目標(biāo)圖像。 |
| copy | 顯示源圖像。忽略目標(biāo)圖像。 |
| source-over | 使用異或操作對(duì)源圖像與目標(biāo)圖像進(jìn)行組合。 |