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);