這篇文章將為大家詳細(xì)講解有關(guān)HTML5 Canvas如何實(shí)現(xiàn)圖形疊加，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),依安企業(yè)網(wǎng)站建設(shè),依安品牌網(wǎng)站建設(shè),網(wǎng)站定制,依安網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營銷,網(wǎng)絡(luò)優(yōu)化,依安網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競爭力。可充分滿足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶成長自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

在Canvas中有12個(gè)組合類型，這些類型用屬性globalCompositeOperation來設(shè)置，下面給出了所有值在Canvas上的含義說明。

globalCompositeOperation屬性值及其含義

"copy" 只繪制新圖形，刪除其他所有內(nèi)容

"darker" 圖形重疊的地方的顏色由兩個(gè)顏色值相減后的值決定

"destination-atop" 已有的內(nèi)容只有在它和新圖形重疊的地方保留。新圖形繪制于內(nèi)容之后。和"source-atop"一樣

"destination-in" 在新圖形以及已有畫布重疊的地方，已有內(nèi)容都保留，所有其他內(nèi)容成為透明的。和"source-in"一樣

"destination-out" 在已有內(nèi)容和新圖形不重疊的地方，已有內(nèi)容保留，所有其他內(nèi)容成為透明。和"source-out"一樣

"destination-over" 新圖形繪制于已有內(nèi)容的后面。和"source-over"一樣

"lighter" 圖形重疊的地方的顏色由兩種顏色值相加后的值來決定

"source-atop" 只有在新圖形和已有內(nèi)容重疊的地方，才繪制新圖形

"source-in" 在新圖形以及已有內(nèi)容重疊的地方，才繪制新圖形，所有其他內(nèi)容成為透明的

"source-out" 只有在與已有圖形不重疊的地方，才繪制新圖形

"source-over" 新圖形繪制于已有圖形的頂部，這是默認(rèn)的行為

"xor" 在重疊和正常繪制的其他地方，圖形都成為透明的

本文中出現(xiàn)的"source"指的是將要繪制到畫布上的顏色，而"destination"指的是畫布上已經(jīng)存在的顏色。globalCompositeOperation的默認(rèn)值是

"source-over"。

參考代碼如下：

ctx.fillStyle = 'red';

ctx.fillRect(0, 0, 40, 20);

ctx.globalCompositeOperation="destination-out"

//此處的類型值更換后將出現(xiàn)不同的情況，讀者可以自行嘗試

ctx.fillStyle = 'blue';

ctx.fillRect(8,7, 20, 20);

關(guān)于“HTML5 Canvas如何實(shí)現(xiàn)圖形疊加”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。