小編給大家分享一下HTML5中實現(xiàn)Canvas圖形組合的方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

創(chuàng)新互聯(lián)是專業(yè)的城中網(wǎng)站建設(shè)公司，城中接單;提供網(wǎng)站建設(shè)、網(wǎng)站制作,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行城中網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊,希望更多企業(yè)前來合作!

在canvas中繪制復(fù)雜圖形時，經(jīng)常會出現(xiàn)圖形交叉的情況，canvas把圖形交叉的情況稱作組合。

通過上下文對象的globalCompositeOperation屬性來設(shè)置圖形的組合方式，該屬性的取值及其含義見表 4?5。其中，source指新繪制的圖形，而destination指原有的圖形，默認(rèn)值是source-over。

表 4?5 globalCompositeOperation屬性取值及含義

操作	含義
source-atop (S atop D)	在兩個圖像都是非透明的地方，顯示源圖像。在目標(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版本中的效果。然而，對組合操作的處理還非常棘手，因為五大主流瀏覽器，如Chrome, Firefox, Safari, Opera, 和IE9，對組合的處理不盡相同。如果你想使用圖形組合，你應(yīng)該了解每個瀏覽器當(dāng)前的支持情況。

由于globalCompositeOperation屬性是全局的，在使用時應(yīng)該注意保存和恢復(fù)狀態(tài)。

看完了這篇文章，相信你對HTML5中實現(xiàn)Canvas圖形組合的方法有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！

網(wǎng)站欄目：HTML5中實現(xiàn)Canvas圖形組合的方法
網(wǎng)頁路徑：http://www.chinadenli.net/article28/jdhgcp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站維護(hù)、電子商務(wù)、企業(yè)建站、網(wǎng)站導(dǎo)航、關(guān)鍵詞優(yōu)化、網(wǎng)頁設(shè)計公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)