Canvas 合成操作：globalCompositeOperation 的图层混合模式

Canvas 的 globalCompositeOperation 是像素级裁剪与覆盖逻辑，非图层混合；它依据 source（新绘）与 destination（已有）的 alpha 值决定绘制区域，如 source-in 仅在 destination 不透明处显示 source，destination-out 则擦除重叠不透明像素；设置须在绘制前生效，drawImage 同样受控，且高级模式如 color-burn 在 Safari 中仍不支持。

Canvas 的 globalCompositeOperation 不是图层混合，而是像素级“画或不画”的裁剪与覆盖逻辑——它不计算颜色值叠加，只根据新旧像素的 alpha 透明度，决定新内容在哪些位置保留、裁剪或清除。

主语必须分清：source 是新画的，destination 是已有的

所有模式名称都含 source 或 destination，这是理解效果的关键：

1. source-in：只在 destination（已有内容）不透明的区域显示 source（新图形），其余变透明 → 适合“把图片塞进形状里”
2. destination-in：只保留 destination 中与 source 重叠且不透明的部分 → 适合“用文字当模板抠底图”
3. source-out：只在 destination 完全透明的区域画 source → 可做反向遮罩或镂空效果
4. destination-out：擦除 destination 中与 source 重叠的不透明像素 → 是真橡皮擦，clearRect() 不算

顺序决定成败：必须绘图前设置

这个属性只对后续绘制操作生效，不会修改已画内容：

1. 先 drawImage(img1)，再设 globalCompositeOperation，然后 drawImage(img2) —— 有效
2. 先 drawImage(img1) 和 drawImage(img2)，再设 globalCompositeOperation —— 无效
3. 每次绘制前可独立设置，但建议显式还原为 'source-over'，避免影响后续
4. clearRect() 不受当前合成模式控制，它只是画一个全透明黑色矩形

drawImage 同样参与合成

很多人误以为合成只对 fill/stroke 生效，其实 drawImage() 完全遵循当前 globalCompositeOperation：

1. 先画一个圆形路径并 fill()（颜色任意，甚至 rgba(0,0,0,0)）
2. 设 ctx.globalCompositeOperation = 'source-in'
3. 再 drawImage(img, 0, 0) → 图片只在圆形内可见
4. 若图片没出现，检查 canvas 尺寸是否小于原图；缩放时边缘抗锯齿模糊会影响裁剪精度

浏览器兼容性要实测，别信文档

像 'color-burn'、'hard-light'、'soft-light' 等高级模式，Safari 至今未支持（截至 2026 年 6 月），Chrome/Firefox 支持也不完全一致：

1. 稳定可用的有：source-over、destination-over、source-in、destination-in、source-out、destination-out、lighter、copy、multiply、screen
2. 'overlay' 在多数现代浏览器中可用，但部分安卓 WebView 仍不稳定
3. 用 if (ctx.globalCompositeOperation in ctx) 判断无效，得靠实际绘制测试
4. 做交互式擦除？必须用 destination-out + fill() 路径，而非 clearRect()