canvas 的 globalcompositeoperation 控制新绘制内容与已有画布内容的像素级裁剪与覆盖逻辑，而非颜色叠加；它决定新图形在哪些区域显示、保留或清除，如 source-over 为默认上层覆盖，destination-out 实现橡皮擦效果。
Canvas 的 globalCompositeOperation 控制的是新绘制内容与已有画布内容如何混合，不是颜色叠加，而是像素级的“裁剪+覆盖”逻辑。它决定的是“新图形画上去时，哪些区域该显示、哪些该保留、哪些该清除”。
常用合成模式的实际效果
以下是最常被用到、也最容易理解错的几种模式（基于 2D 上下文）：
- 'source-over'（默认）：新图形画在旧图形上方，重叠部分正常显示新图形——就是我们平时“画上去”的直觉行为。
- 'destination-over'：新图形画在旧图形下方，相当于把新内容当背景；适合做底纹或衬底，但需注意：若画布原本透明，它会直接显示在 canvas 背景上。
- 'source-in'：只在旧图形有像素（非完全透明）的区域绘制新图形，其余区域变透明；常用于“贴图裁剪”，比如把一张图片限制在圆形路径内显示。
- 'destination-in'：只保留旧图形中与新图形重叠且不透明的部分，其余清空；适合“蒙版提取”，例如用文字形状抠出底下图像的局部。
- 'source-out'：只在旧图形完全透明的区域绘制新图形，相当于“挖空已有内容再画”；可用于制作镂空文字或反向遮罩。
- 'destination-out'：擦除旧图形中与新图形重叠的部分（变成透明），其余保留；是真正的“橡皮擦”模式，常用于擦除动画或交互式涂鸦。
使用时的关键细节
合成操作依赖当前绘图状态中的 alpha 值和像素实际透明度，不是看 fillStyle 或 strokeStyle 是否设为透明色：
- 路径必须已定义并调用
fill()或stroke()才会参与合成；beginPath()后没绘制，什么也不会发生。 - 如果用
clearRect()清空画布，它等价于绘制一个全透明黑色矩形，此时destination-out对其无效（因为没有“可擦除”的不透明像素）。 - 开启
shadowBlur后，阴影也会参与合成运算，可能导致意料之外的半透明混合，调试时建议先关闭阴影。 - 合成模式对
drawImage()同样生效——你可以用一张 PNG 图作为“蒙版图形”，配合source-in把另一张图限制在其 Alpha 通道范围内。
一个典型蒙版示例
想让一张图片只显示在圆形区域内：
- 先用
arc()绘制圆，fill()填充（任意颜色，甚至透明）； - 设置
ctx.globalCompositeOperation = 'source-in'； - 再调用
drawImage(img, 0, 0)； - 结果：只有圆形范围内的图片像素可见，其余变透明。
兼容性与注意事项
所有现代浏览器都支持全部 16 种标准合成模式（如 'xor'、'lighter' 等），但部分模式（如 'exclusion'、'hue'）仅在较新版本 Chrome/Firefox 中可用，Safari 支持较慢。生产环境建议优先使用上述 6 种广泛兼容的模式。另外，WebGL 中的混合逻辑完全不同，不要混淆 Canvas 2D 的 globalCompositeOperation 和 WebGL 的 blend function。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
