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