在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 圖形組合是如何實現的？附代碼的詳細內容，其它編程語言
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
新聞熱點
疑難解答
