globalcompositeoperation是像素级“画或不画”开关，非颜色混合；source指新绘内容，destination指已有像素；source-in用旧图框新图，destination-in用新图抠旧图；destination-out为真擦除，clearrect()不是；drawimage()同样受控，合成依赖实际alpha值。
Canvas 的 globalCompositeOperation 不是调色盘，而是像素级的“画或不画”开关——它不混合颜色，只决定新内容在哪些位置保留、裁剪或清除已有像素。用错值，图形可能直接消失；顺序搞反，蒙版就变成反效果；浏览器不支持，高级模式干脆不渲染。核心就三点：主语是谁、顺序怎么排、哪些值真正能用。
搞清主语：source 和 destination 谁是“新”，谁是“旧”
所有合成模式名称都带 source 或 destination，这直接定义了操作对象：
-
source 指你正要画的新内容（比如刚调用的
fillRect()或drawImage()） - destination 指画布上已存在的像素（即之前画过、还没被 clear 的内容）
-
source-in：只在 destination（旧图）有不透明像素的地方，显示 source（新图）；其余全透明 → 适合“把图片塞进某个形状里” -
destination-in：只保留 destination（旧图）中与 source（新图）重叠且不透明的部分；其余清空 → 适合“用文字当镂空模板抠底图”
关键操作必须“落笔才算数”
合成逻辑只对已实际绘制的像素生效，不是对路径描述起作用：
- 仅写
beginPath()+arc()不触发合成；必须跟fill()或stroke()才生成可参与运算的像素 -
clearRect()是个“假擦除”：它只是画一个全透明黑色矩形，不受当前globalCompositeOperation控制 - 真擦除要用
destination-out+fill()或stroke()路径，才能把旧图中重叠区域设为透明 - 如果擦完边缘发灰，大概率是原图带抗锯齿半透明边——
destination-out只清 alpha，不改 RGB 值
drawImage() 同样听它指挥
很多人以为合成只对 fill/stroke 生效，其实 drawImage() 完全遵循当前设置，这是做蒙版的核心：
- 先画一个圆形（
fill()随便填色，甚至rgba(0,0,0,0)） - 设
ctx.globalCompositeOperation = 'source-in' - 再
drawImage(img, 0, 0)→ 图片只在圆形区域内可见 - 若图片没出现，检查 canvas 尺寸是否小于图原始宽高；缩放时边缘模糊会影响
source-in的裁剪精度
跨浏览器安全可用的模式清单
别被文档里 16 种甚至 26 种值迷惑，Safari 至今不支持 color-burn等高级模式，稳定可用的只有这些：
-
source-over（默认）、destination-over -
source-in、destination-in、source-out、destination-out -
lighter（叠加变亮）、copy（完全替换） -
multiply和screen在主流浏览器中表现一致，但soft-light等不要依赖
