HTML5中實(shí)現(xiàn)Canvas圖形組合的方法-創(chuàng)新互聯(lián)
小編給大家分享一下HTML5中實(shí)現(xiàn)Canvas圖形組合的方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！
在canvas中繪制復(fù)雜圖形時(shí)，經(jīng)常會(huì)出現(xiàn)圖形交叉的情況，canvas把圖形交叉的情況稱作組合。
通過(guò)上下文對(duì)象的globalCompositeOperation屬性來(lái)設(shè)置圖形的組合方式，該屬性的取值及其含義見(jiàn)表 4?5。其中，source指新繪制的圖形，而destination指原有的圖形，默認(rèn)值是source-over。
| 操作 | 含義 |
|---|---|
| source-atop (S atop D) | 在兩個(gè)圖像都是非透明的地方，顯示源圖像。在目標(biāo)圖像是非透明但源圖像是透明的地方，顯示目標(biāo)圖像。其他地方透明顯示。 |
| source-in (S in D) | 在源圖像和目標(biāo)圖像均透明的地方，顯示源圖像。其他地方透明顯示。 |
| source-out (S out D) | 在源圖像非透明且目標(biāo)圖像為透明的地方，顯示源圖像。其他地方透明顯示。 |
| source-over (S over D, default) | 在源圖像為非透明的地方，顯示源圖像。其他地方顯示目標(biāo)圖像。 |
| destination-atop (S atop D) | 在源圖像和目標(biāo)圖像均為非透明的地方，顯示目標(biāo)圖像。在源圖像非透明且目標(biāo)圖像為透明的地方，顯示源圖像。其他地方透明顯示。 |
| destination-in (S in D) | 在源圖像和目標(biāo)圖像均為非透明的地方，顯示目標(biāo)圖像。其他地方透明顯示。 |
| destination -out (S out D) | 在目標(biāo)圖像為非透明且源圖像為透明的地方，顯示目標(biāo)圖像。其他地方透明顯示。 |
| destination -over (S over D) | 在目標(biāo)圖像為非透明的地方，顯示目標(biāo)圖像。其他地方顯示目標(biāo)圖像。 |
| lighter (S plus D) | 顯示源圖像和目標(biāo)圖像之和。 |
| xor (S xor D) | 源圖像和目標(biāo)圖像取異或操作。 |
| copy (D is ignored) | 顯示源圖像，不顯示目標(biāo)圖像。 |
下圖展示了globalCompositeOperation屬性在不同取值下，源圖形與目標(biāo)圖形的效果。其中，紅色的圓代表源圖形（S），藍(lán)色的矩形代表目標(biāo)圖形（D）。
上圖是在Google Chrome瀏覽器41.0.2272.118版本中的效果。然而，對(duì)組合操作的處理還非常棘手，因?yàn)槲宕笾髁鳛g覽器，如Chrome, Firefox, Safari, Opera, 和IE9，對(duì)組合的處理不盡相同。如果你想使用圖形組合，你應(yīng)該了解每個(gè)瀏覽器當(dāng)前的支持情況。
由于globalCompositeOperation屬性是全局的，在使用時(shí)應(yīng)該注意保存和恢復(fù)狀態(tài)。
看完了這篇文章，相信你對(duì)HTML5中實(shí)現(xiàn)Canvas圖形組合的方法有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道，感謝各位的閱讀！
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無(wú)理由+7*72小時(shí)售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì)，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
網(wǎng)站名稱：HTML5中實(shí)現(xiàn)Canvas圖形組合的方法-創(chuàng)新互聯(lián)
文章路徑：http://m.jiaotiyi.com/article/hggdh.html