Canvas 的 globalCompositeOperation 是像素级裁剪与覆盖逻辑，非图层混合；它依据 source（新绘）与 destination（已有）的 alpha 值决定绘制区域，如 source-in 仅在 destination 不透明处显示 source，destination-out 则擦除重叠不透明像素；设置须在绘制前生效，drawImage 同样受控，且高级模式如 color-burn 在 Safari 中仍不支持。
Canvas 的 globalCompositeOperation 不是图层混合，而是像素级“画或不画”的裁剪与覆盖逻辑——它不计算颜色值叠加，只根据新旧像素的 alpha 透明度，决定新内容在哪些位置保留、裁剪或清除。
主语必须分清：source 是新画的，destination 是已有的
所有模式名称都含 source 或 destination，这是理解效果的关键：
- source-in：只在 destination（已有内容）不透明的区域显示 source（新图形），其余变透明 → 适合“把图片塞进形状里”
- destination-in：只保留 destination 中与 source 重叠且不透明的部分 → 适合“用文字当模板抠底图”
- source-out：只在 destination 完全透明的区域画 source → 可做反向遮罩或镂空效果
- destination-out：擦除 destination 中与 source 重叠的不透明像素 → 是真橡皮擦，clearRect() 不算
顺序决定成败：必须绘图前设置
这个属性只对后续绘制操作生效，不会修改已画内容：
- 先 drawImage(img1)，再设 globalCompositeOperation，然后 drawImage(img2) —— 有效
- 先 drawImage(img1) 和 drawImage(img2)，再设 globalCompositeOperation —— 无效
- 每次绘制前可独立设置，但建议显式还原为 'source-over'，避免影响后续
- clearRect() 不受当前合成模式控制，它只是画一个全透明黑色矩形
drawImage 同样参与合成
很多人误以为合成只对 fill/stroke 生效，其实 drawImage() 完全遵循当前 globalCompositeOperation：
- 先画一个圆形路径并 fill()（颜色任意，甚至 rgba(0,0,0,0)）
- 设 ctx.globalCompositeOperation = 'source-in'
- 再 drawImage(img, 0, 0) → 图片只在圆形内可见
- 若图片没出现，检查 canvas 尺寸是否小于原图；缩放时边缘抗锯齿模糊会影响裁剪精度
浏览器兼容性要实测，别信文档
像 'color-burn'、'hard-light'、'soft-light' 等高级模式，Safari 至今未支持（截至 2026 年 6 月），Chrome/Firefox 支持也不完全一致：
- 稳定可用的有：source-over、destination-over、source-in、destination-in、source-out、destination-out、lighter、copy、multiply、screen
- 'overlay' 在多数现代浏览器中可用，但部分安卓 WebView 仍不稳定
- 用 if (ctx.globalCompositeOperation in ctx) 判断无效，得靠实际绘制测试
- 做交互式擦除？必须用 destination-out + fill() 路径，而非 clearRect()
