canvas合成和裁剪

canvas合成和裁剪

1. 屬性

   globalCompositeOperation=type       設置覆蓋類型
       source-over         源覆蓋在目標上
       source-in           源覆蓋在目標上的公共部分（只取源圖形的部分）
       source-out          源覆蓋在目標上之外的部分
       source-atop         源覆蓋在目標上的公共部分與目標的交集
       destination-over    目標覆蓋在源上
       destination-in      
       destination-out
       destination-atop
       lighter             目標和源公共部分顏色值相加，結果是顏色更亮
       copy                只顯示源
       xor                 去除源和目標的公共部分
       multiply            目標和源公共部分顏色值相乘，結果是顏色更暗
       screen              比lighter的效果更light
       overlay             multiply和screen的混合做用
       darken              保留目標和源像素最暗的部分
       lighten             保留目標和源像素最亮的部分
       color-dodge
       color-burn
       hard-light
       soft-light
       difference
       exclusion
       hue
       saturation
       color
       luminosity
   
   ctx.clip();             裁剪一起區域

2. 合成使用示例

   ctx.fillStyle='blue';
   ctx.fillRect(150,150,200,200)  // 源圖形
   ctx.globalCompositeOperation="source-over";
   ctx.fillStyle='orange';
   ctx.fillRect(100,100,200,200); // 目標圖形

3. 裁剪使用示例

   const canvas = document.getElementById('canvas');
   const ctx = canvas.getContext('2d');
   
   ctx.beginPath();
   ctx.arc(200, 200, 60, 0, Math.PI * 2, true);
   ctx.stroke();
   ctx.clip();
   
   ctx.fillStyle="green";
   ctx.fillRect(150,150,50,50);