globalCompositeOperation 是像素级绘制逻辑而非颜色混合；source-in 用旧图框新图，destination-in 用新图抠旧图；destination-out 是真擦除，clearRect() 不是；drawImage() 同样受其控制，合成基于实际 alpha 值。
globalCompositeOperation 不是颜色混合，而是像素级的“画还是不画”逻辑——它决定新绘制内容在哪些位置保留、裁剪或清除已有像素。用错值，图形会消失、反向显示，甚至整个画布变空。
source-in 和 destination-in 容易混淆，但作用对象完全相反
这两个值都依赖“重叠区域”，但谁是主语、谁是参照物，决定了结果走向：
-
source-in：只在“目标图像（已有内容）有像素”的区域画出“源图像（新内容）”，其余全透明；适合把图片限制在某个形状内（比如圆形头像裁剪） -
destination-in：只保留“目标图像（已有内容）中与源图像（新内容）重叠且不透明”的部分，其余清空；适合用文字当蒙版抠图（文字形状露出底图） - 关键区别：前者是“用旧图框住新图”，后者是“用新图抠出旧图”
- 若旧内容全是透明像素（比如刚
clearRect()过），source-in会画不出任何东西——因为没“可框区域”
destination-out 是真·橡皮擦，但 clearRect() 不是
destination-out 会把已有画布中与新图形重叠的不透明像素设为透明，实现擦除效果；而 clearRect() 只是画一个全透明黑色矩形，它不参与合成运算，也不受当前 globalCompositeOperation 影响。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 想做交互式涂鸦擦除？必须用
destination-out+fill()或stroke()路径，不能靠clearRect() - 如果擦除后画面残留灰边，大概率是旧图形带半透明抗锯齿边缘，
destination-out只清 alpha，不改颜色值 - 擦除前建议关闭
shadowBlur，否则阴影也会被当作“目标像素”参与擦除，导致意外留影
drawImage() 同样受 globalCompositeOperation 控制
很多人以为合成模式只对 fillRect() 或路径生效，其实 drawImage() 也完全遵循当前设置——这正是实现高级蒙版的核心。
立即学习“前端免费学习笔记（深入）”；
- 典型流程：先用
arc()+fill()绘制一个圆形（颜色任意，甚至rgba(0,0,0,0)）→ 设ctx.globalCompositeOperation = 'source-in'→ 再drawImage(img, 0, 0) - 此时图片只会显示在圆形路径覆盖的区域内，其余透明；注意：圆形必须已
fill()（或stroke()），仅beginPath()+arc()不触发合成 - 若图片没出现，检查 canvas 尺寸是否小于图片原始尺寸，
drawImage()缩放时 alpha 边缘可能变模糊，影响source-in的裁剪精度
最常被忽略的一点：所有合成操作都基于当前像素的 alpha 值，不是 fillStyle 的透明度设置；哪怕 fillStyle = 'rgba(255,0,0,0.1)'，只要该处像素实际 alpha > 0，就参与合成判断——调试时直接用 getImageData() 看 alpha 通道更可靠。
