globalCompositeOperation是像素级裁剪+覆盖逻辑，非颜色混合；只对后续绘制生效，必须绘图前设置；source-in用旧图框新图，destination-in用新图抠旧图；destination-out才是真擦除，clearRect不参与合成。
Canvas 的 globalCompositeOperation 不是 Photoshop 那种颜色混合，它只决定“新画的东西在哪些像素位置出现、保留或清掉”，本质是像素级裁剪+覆盖逻辑。用错值，图直接消失或反着来——不是代码写错了，是主语想反了。
为什么 drawImage 之后设 globalCompositeOperation 没反应
这个属性只对**后续绘制操作**生效，不会回溯修改已画好的内容。常见错误是先 drawImage() 两张图，再设 globalCompositeOperation，结果毫无变化。
- 必须在调用
drawImage()、fillRect()、fill()等绘图方法之前设置 - 每次绘制前都可独立设置，不需要全局 reset，但建议显式还原为
'source-over'，避免污染后续绘图 -
clearRect()清空画布，不会重置globalCompositeOperation值，它仍保持上一次设置
source-in 和 destination-in 总是搞反？看主语
两者都依赖“重叠区域”，但主语不同：source 指新图形，destination 指已有内容。效果相反，顺序一错就全拧了。
-
source-in：只在“已有内容不透明”的区域画出“新图形” → 新图被旧图形状框住（比如把图片扣进圆形） -
destination-in：只保留“已有内容中与新图形重叠且不透明”的部分 → 用新图当蒙版抠旧图（比如用文字形状露出底图） - 如果效果相反，大概率是绘制顺序错了：先画背景（destination），再设
source-in，再画遮罩图形（source） - 若旧内容全是透明像素（比如刚
clearRect()过），source-in会画不出任何东西——因为没“可框区域”
哪些值真能跨浏览器用，别信文档
像 'color-burn'、'hard-light'、'overlay' 这类高级模式，Safari 至今未实现（截至 2026 年 5 月），Chrome/Firefox 支持也不完全一致。
立即学习“前端免费学习笔记（深入）”；
- 安全可用的跨浏览器值只有：
'source-over'、'destination-over'、'source-in'、'destination-in'、'source-out'、'destination-out'、'lighter'、'copy' -
'multiply'和'screen'在主流浏览器中稳定，但'soft-light'别默认能用 -
if (ctx.globalCompositeOperation in ctx)判断无效，得靠实际绘制测试或 UA 判断
destination-out 是真擦除，clearRect 不是
destination-out 会把已有画布中与新图形重叠的不透明像素设为透明，实现橡皮擦效果；而 clearRect() 只是画一个全透明黑色矩形，它不参与合成运算，也不受当前 globalCompositeOperation 影响。
- 做交互式涂鸦擦除？必须用
destination-out+fill()或stroke()路径，不能靠clearRect() - 擦除后残留灰边？大概率是旧图形带半透明抗锯齿边缘，
destination-out只清 alpha，不改颜色值 - 擦除前建议关闭
shadowBlur，否则阴影也会被当作“目标像素”参与擦除，导致意外留影
真正难的不是记住十几个值，而是每次动笔前想清楚：你想控制的是“新图形怎么出现”，还是“旧内容怎么留下”。顺序、主语、浏览器现实，三者缺一不可。
