HTML5 Canvas 圖形組合是如何實現的？附代碼

本篇文章帶給大家的內容是關於HTML5 Canvas 圖形組合是如何實現的？附程式碼，有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

在canvas中繪製複雜圖形時，常會出現圖形交叉的情況，canvas把圖形交叉的情況稱作組合。

透過上下文物件的globalCompositeOperation屬性來設定圖形的組合方式，該屬性的取值及其意義見表 4‑5。其中，source指新繪製的圖形，而destination指原有的圖形，預設值是source-over。

##意義在兩個影像都是非透明的地方，顯示來源影像。在目標影像是非透明但來源影像是透明的地方，顯示目標影像。其他地方透明顯示。 在來源影像和目標影像均透明的地方，顯示來源影像。其他地方透明顯示。 在來源影像非透明且目標影像為透明的地方，顯示來源影像。其他地方透明顯示。 在來源影像為非透明的地方，顯示來源影像。其他地方顯示目標影像。 在來源影像和目標影像均為非透明的地方，顯示目標影像。在來源影像非透明且目標影像為透明的地方，顯示來源影像。其他地方透明顯示。 在來源影像和目標影像均為非透明的地方，顯示目標影像。其他地方透明顯示。 在目標影像為非透明且來源影像為透明的地方，顯示目標影像。其他地方透明顯示。

表4‑5 globalCompositeOperation屬性取值及意義

操作
	##source-atop (S atop D)
	source-in (S in D)
	source-out (S out D)
	source-over (S over D, default)
	destination-atop (S atop D)
	destination-in (S in D)
	destination -out (S out D)

######destination -over (S over D)######在目標影像為非透明的地方，顯示目標影像。其他地方顯示目標影像。 ############lighter (S plus D)######顯示來源影像和目標影像總和。 ############xor (S xor D)######來源影像和目標影像取異或操作。 ############copy (D is ignored)######顯示來源影像，不顯示目標影像。 ############

下圖展示了globalCompositeOperation屬性在不同取值下，來源圖形與目標圖形的效果。其中，紅色的圓代表來源圖形（S），藍色的矩形代表目標圖形（D）。

上圖是Google Chrome瀏覽器41.0.2272.118版本中的效果。然而，對組合作業的處理仍非常棘手，因為五大主流瀏覽器，如Chrome, Firefox, Safari, Opera, 和IE9，對組合的處理不盡相同。如果你想使用圖形組合，你應該了解每個瀏覽器目前的支援情況。

由於globalCompositeOperation屬性是全域的，在使用時應該注意保存和恢復狀態。

以上就是對HTML5 Canvas 圖形組合是如何實現的？附程式碼的全部介紹，如果您想了解更多有關Html5影片教學，請關注PHP中文網。

以上是HTML5 Canvas 圖形組合是如何實現的？附代碼的詳細內容。更多資訊請關注PHP中文網其他相關文章！