html5中canvas標(biāo)簽中2d上下文globalCompositeOperation屬性_html/css

定義和用法

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

例:

 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 以及更早的版本不支持 元素。

屬性值

藍(lán)色:源圖像 = 您打算放置到畫布上的繪圖。

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

2.source-in 在目標(biāo)圖像中顯示源圖像。只有目標(biāo)圖像內(nèi)的源圖像部分會(huì)顯示，目標(biāo)圖像是透明的。

3.source-out 在目標(biāo)圖像之外顯示源圖像。只會(huì)顯示目標(biāo)圖像之外源圖像部分，目標(biāo)圖像是透明的。

4.source-atop 在目標(biāo)圖像頂部顯示源圖像。源圖像位于目標(biāo)圖像之外的部分是不可見的。

5.destination-over 在源圖像上方顯示目標(biāo)圖像。

6.destination-atop 在源圖像頂部顯示目標(biāo)圖像。源圖像之外的目標(biāo)圖像部分不會(huì)被顯示。

7.destination-in 在源圖像中顯示目標(biāo)圖像。只有源圖像內(nèi)的目標(biāo)圖像部分會(huì)被顯示，源圖像是透明的。

8.destination-out 在源圖像外顯示目標(biāo)圖像。只有源圖像外的目標(biāo)圖像部分會(huì)被顯示，源圖像是透明的。

9.lighter 顯示源圖像 + 目標(biāo)圖像。

10.copy 顯示源圖像。忽略目標(biāo)圖像。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com