Canvas合成与裁剪完整教程，掌握合成模式、裁剪路径、透明度控制等高级绑制技巧。Canvas合成与裁剪是控制图形如何组合和显示的高级技术，可以实现复杂的视觉效果。
在Canvas绑制过程中，新绑制的内容如何与已有内容交互是一个关键问题。Canvas提供了两种机制来控制这个过程：
当你在Canvas上绑制多个图形时，后绑制的图形会覆盖先绑制的图形。合成操作允许你改变这种默认行为，实现各种混合效果：
ctx.globalCompositeOperation = 'source-over' // 默认：新图形覆盖旧图形
ctx.globalCompositeOperation = 'destination-out' // 擦除效果
ctx.globalCompositeOperation = 'lighter' // 颜色叠加变亮
裁剪路径定义了一个可见区域，之后绑制的所有内容都只在这个区域内显示：
ctx.beginPath()
ctx.arc(100, 100, 50, 0, Math.PI * 2)
ctx.clip() // 设置圆形裁剪区域
// 之后绑制的内容只在圆形区域内可见
ctx.fillRect(0, 0, 200, 200)
合成和裁剪可以配合使用，实现更复杂的效果：
// 先设置裁剪区域
ctx.beginPath()
ctx.rect(50, 50, 100, 100)
ctx.clip()
// 再设置合成模式
ctx.globalCompositeOperation = 'lighter'
// 绑制内容
ctx.fillRect(0, 0, 200, 200)
Canvas提供了多种合成模式，分为以下几类：
| 类别 | 模式 | 说明 |
|---|---|---|
| 基础 | source-over | 默认模式，新图形覆盖 |
| 擦除 | destination-out | 用新图形擦除已有内容 |
| 混合 | lighter | 颜色相加变亮 |
| 混合 | multiply | 颜色相乘变暗 |
| 混合 | screen | 屏幕混合 |
| 混合 | overlay | 叠加混合 |
| 混合 | darken | 取较暗颜色 |
| 混合 | lighten | 取较亮颜色 |
| 遮罩 | source-in | 只显示重叠部分 |
| 遮罩 | source-atop | 只显示重叠和已有部分 |
| 遮罩 | destination-in | 只显示重叠部分（已有内容） |
| 遮罩 | destination-atop | 只显示重叠和新内容部分 |
| 方法/属性 | 说明 |
|---|---|
| globalCompositeOperation | 设置合成模式 |
| globalAlpha | 设置全局透明度 |
| clip() | 设置裁剪路径 |
| clip(path) | 使用Path2D设置裁剪路径 |
ctx.globalCompositeOperation = 'destination-out'
ctx.beginPath()
ctx.arc(x, y, radius, 0, Math.PI * 2)
ctx.fill()
ctx.drawImage(image, 0, 0)
ctx.globalCompositeOperation = 'source-in'
ctx.drawImage(mask, 0, 0)
ctx.globalCompositeOperation = 'lighter'
ctx.shadowBlur = 20
ctx.shadowColor = '#fff'
ctx.fillText('Glow', 100, 100)
合成模式顺序
合成模式只影响之后的绑制，不影响已有内容。
裁剪路径累积
多次调用clip会累积裁剪区域，使用save/restore重置。
性能考虑
某些合成模式可能影响性能，谨慎使用。
浏览器兼容
大部分现代浏览器支持所有合成模式，但建议测试。