Canvas组合图形

组合图形是一种图形处理功能,可以将多个独立的形状组合的一个图形对象,然后对组合后的图形对象进行移动、修改大小等操作。

https://baike.baidu.com/item/%E7%BB%84%E5%90%88%E5%9B%BE%E5%BD%A2/3747762?fr=aladdin

1. 实现组合

需要使用 globalCompositeOperation 这个属性。

// 语法
ctx.globalCompositeOperation = “source-over”;

属性值:

  • source-over 默认属性,新图像会覆盖在原有图像
  • source-in 只保留当前图重叠的部分
  • source-out 绘制不重叠部分
  • source-atop 新图像仅仅显示与老图像重叠区域,老图像仍然可以显示
  • destination-over 原图覆盖新图
  • destination-in 绘制原图和新图重叠部分
  • destination-out 绘制原图和新图不重叠部分
  • destination-atop 绘制原图和新图重叠部分以及新图
  • lighten 绘制新图和原图,重叠部分加色处理
  • darken 保留重叠部分最黑的像素
  • lighter 保证重叠部分最量的像素
  • copy 绘制新图,覆盖原图
  • xor 重叠部分会变成透明

2.效果演示

2.1 source-over 新图像会覆盖在原有图像

2.2 source-in 只保留当前图重叠的部分

2.3 source-out 绘制不重叠部分

2.4 source-atop 新图像仅仅显示与老图像重叠区域,老图像仍然可以显示

2.5 destination-over 原图覆盖新图

2.6 destination-in 绘制原图和新图重叠部分

2.7 destination-out 绘制原图和新图不重叠部分

2.8 destination-atop 绘制原图和新图重叠部分以及新图

2.9 lighten 绘制新图和原图,重叠部分加色处理

2.10 darken 保留重叠部分最黑的像素

2.11 lighter 保证重叠部分最量的像素

2.12 copy 绘制新图,覆盖原图

2.13 xor 重叠部分会变成透明