globalcompositeoperation不是颜色混合，而是像素级“裁剪+覆盖”逻辑，决定新图形画上去时哪些区域显示、保留或清空；它仅影响后续绘制操作，需在drawimage等前设置，且source-in与destination-in主语相反，跨浏览器安全值有限。
globalCompositeOperation 不是颜色混合，而是像素级的“裁剪+覆盖”逻辑。它决定新图形画上去时，哪些区域显示、保留或清空——理解这点，才能避开绝大多数误用。
为什么 drawImage 之后设 globalCompositeOperation 才生效
该属性只影响**后续绘制操作**，对已存在的像素无 retroactive 效果。常见错误是先画完两张图，再改属性，结果毫无变化。
- 必须在调用
drawImage()或fillRect()等绘图方法之前设置globalCompositeOperation - 每次绘制前可独立设置，不需要全局重置（但建议显式还原为
'source-over'避免污染） - 若用
clearRect()清空画布，不会重置该属性值，仍保持上一次设置
source-in 和 destination-in 容易搞反的两个场景
两者都依赖“重叠区域”，但主语不同：source 指新图形，destination 指已有内容。
-
source-in：只在已有内容不透明的区域画新图形，其余变透明 → 常用于“把图片扣进某个形状里” -
destination-in：只保留已有内容中与新图形重叠且不透明的部分，其余清空 → 常用于“用文字当蒙版抠图” - 如果效果相反，八成是顺序错了：先画背景（destination），再设
source-in，再画遮罩图形（source）
浏览器兼容性陷阱：别信文档里的全部值
像 '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 判断
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
