溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下HTML5中實現Canvas圖形組合的方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！
在canvas中繪制復雜圖形時，經常會出現圖形交叉的情況，canvas把圖形交叉的情況稱作組合。
通過上下文對象的globalCompositeOperation屬性來設置圖形的組合方式，該屬性的取值及其含義見表 4?5。其中，source指新繪制的圖形，而destination指原有的圖形，默認值是source-over。
| 操作 | 含義 |
|---|---|
| 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圖形組合的方法有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
