Canvas clip方法详解，掌握裁剪路径的创建、嵌套和实际应用技巧。clip方法用于创建裁剪区域，限制后续绑制只在特定区域内显示。
ctx.clip()
ctx.clip(fillRule)
ctx.clip(path, fillRule)
| 参数 | 说明 |
|---|---|
| fillRule | 填充规则：'nonzero' 或 'evenodd' |
| path | Path2D对象 |
clip方法将当前路径转换为裁剪区域：
ctx.beginPath()
ctx.arc(100, 100, 50, 0, Math.PI * 2)
ctx.clip()
// 之后绑制只在圆形区域内显示
ctx.fillRect(0, 0, 200, 200)
裁剪路径可以是任意形状：
ctx.beginPath()
ctx.arc(100, 100, 50, 0, Math.PI * 2)
ctx.clip()
ctx.beginPath()
ctx.rect(50, 50, 100, 100)
ctx.clip()
ctx.beginPath()
ctx.moveTo(100, 50)
ctx.lineTo(150, 100)
ctx.lineTo(125, 150)
ctx.lineTo(75, 150)
ctx.lineTo(50, 100)
ctx.closePath()
ctx.clip()
clip方法支持两种填充规则：
非零环绕规则，用于判断点是否在路径内：
ctx.clip('nonzero')
奇偶规则，用于创建镂空效果：
ctx.clip('evenodd')
多次调用clip会产生累积效果：
ctx.beginPath()
ctx.rect(0, 0, 200, 200)
ctx.clip()
ctx.beginPath()
ctx.rect(50, 50, 100, 100)
ctx.clip()
// 最终裁剪区域是两个矩形的交集
使用save/restore重置裁剪路径：
ctx.save()
ctx.beginPath()
ctx.arc(100, 100, 50, 0, Math.PI * 2)
ctx.clip()
// 绑制操作
ctx.restore() // 裁剪路径被重置
可以使用Path2D对象创建裁剪路径：
const path = new Path2D()
path.arc(100, 100, 50, 0, Math.PI * 2)
ctx.clip(path)
路径要求
clip()需要在路径定义后调用，且路径必须闭合。
累积效果
多次clip会累积，使用save/restore重置。
性能考虑
复杂裁剪路径可能影响性能。
状态保存
clip会影响绑图状态，建议配合save/restore使用。