2023年微信小程序API 繪圖·globalCompositeOperation

什么是canvasContext.globalCompositeOperation?

canvasContext.globalCompositeOperation是微信小程序API中的一種繪圖屬性，在基礎(chǔ)庫1.9.90版本起開始支持，它用于設(shè)置在繪制新形狀時需要應用的合成操作類型。

如何使用canvasContext.globalCompositeOperation？

通過type參數(shù)傳入所需的操作類型即可使用，type支持的操作有：

1. xor：異或合成
2. source-over：在目標圖像上顯示源圖像
3. source-atop：在目標圖像頂部顯示源圖像，其他部分則會變?yōu)橥该?/li>
4. destination-out：目標圖像中與源圖像重疊的部分變?yōu)橥该?，但不影響源圖像
5. lighter：將源圖像與目標圖像相加，使得看起來比原來更亮
6. overlay：覆蓋合成，在進行此操作后，源圖像會變暗，而目標圖像會變亮
7. darken：只有源圖像和目標圖像交集處的顏色才會保留，其他部分變黑色
8. lighten：只有源圖像和目標圖像交集處的顏色才會保留，其他部分變白色
9. hard-light：顏色加深和變亮的混合模式，具體效果取決于源圖像
10. multiply：正片疊底，將每個像素的顏色值乘以目標圖像相應像素的顏色值
11. destination-over：在源圖像頂部顯示目標圖像，其他部分則會變?yōu)橥该?/li>
12. color-dodge：只有源圖像與目標圖像重疊處才保持原色，其他部分減輕曝光度
13. color-burn：深色燒焦，降低源圖像某些區(qū)域的曝光度，以增強目標圖像
14. soft-light：光滑減淡，根據(jù)源圖像中顏色的程度和目標圖像產(chǎn)生不同程度的顏色反差
15. difference：差異合成，將源圖像顏色值減去目標圖像顏色值的絕對值，并通過160來調(diào)整結(jié)果
16. exclusion：排除合成，在源和目標圖像中沒有重疊的地方顯示出來，黑色區(qū)域沒有反應，白色區(qū)域則完全反轉(zhuǎn)
17. saturation：飽和度
18. luminosity：亮度

常用的操作類型

1. source-over

source-over是默認的操作類型，這意味著新的形狀將繪制在之前的形狀上方。下面是一個實現(xiàn)這個效果的例子：

// 在畫布上創(chuàng)建兩個矩形
context.beginPath();
context.fillStyle = 'red';
context.fillRect(10, 10, 50, 50);
context.fillStyle = 'blue';
context.fillRect(30, 30, 50, 50);

// 繪制橙色矩形，在前面兩個矩形的頂部
context.beginPath();
context.globalCompositeOperation = 'source-over';
context.fillStyle = 'orange';
context.fillRect(20, 20, 50, 50);

以上代碼會在最初繪制出紅色和藍色的兩個矩形，并在其頂部

<本文由himall原創(chuàng)，商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請標明：himall原創(chuàng)>