Canvas 中的 clip() 方法，本质上并非直接擦除画布上的已有内容，而是通过动态遮罩机制来限定后续绘图的可见范围。所有后续绘图操作都只能在该遮罩定义的区域内显示，区域外的像素不受任何影响。要充分发挥这一能力，关键在于掌握三个核心环节：路径定义、裁剪锁定与状态管理。
clip() 生效的前提条件：路径必须完整闭合
调用 clip() 之前，路径必须已完成定义并处于闭合状态，否则裁剪操作将无法生效。浏览器不会报错，但遮罩效果也不会出现。因此，需要确保以下几点：
- 先执行
ctx.beginPath()，再通过rect()、arc()、lineTo()等方法来绘制路径； - 使用
closePath()主动闭合路径，或者让图形首尾自动重合（例如通过arc默认闭合）； - 避免在未闭合的路径上调用
clip()，比如只绘制了三条边的矩形却忘记调用closePath()，这样无法得到预期的裁剪形状。
裁剪区域持续生效，需通过 save/restore 进行隔离
clip 属于上下文状态的一部分，一旦设定便会持续影响后续所有绘制，直到你主动恢复为止。若不加以控制，画面会逐渐缩小，内容也可能莫名消失。标准操作流程如下：
- 每次裁剪前，先调用
ctx.save()，将当前所有状态（包括颜色、字体、裁剪路径等）完整保存下来； - 然后依次执行“路径 → clip() → 绘图”的流程，并将整个过程放在
save()与restore()之间； - 调用
ctx.restore()后，本次裁剪的影响会被彻底清除，外部图层保持原样，不会留下任何残留。
支持复合遮罩：nonzero 与 evenodd 填充规则
单次 clip() 可以接受 "nonzero"（默认值）或 "evenodd" 参数，用于控制复杂路径的填充逻辑，从而实现“挖空”等特殊效果。具体说明如下：
nonzero按路径方向计算环绕数，适用于常规遮罩场景；evenodd则根据奇偶规则判断，适合制作镂空设计——例如顺时针绘制一个大圆、逆时针绘制一个小圆，然后使用clip("evenodd")，小圆区域就会自动被排除在外；- 需要注意的是，多个子路径必须在同一次
beginPath()中定义，不能分两次调用clip()，否则后一次会直接覆盖前一次的效果。
常见实用场景与注意事项
clip 并非仅止于装饰性技巧，而是兼顾性能与表现力的底层能力，特别适用于图像蒙版、局部动画、不规则 UI 元素等真实需求。例如：
- 头像裁剪：使用圆形路径配合
drawImage()，即可轻松获得圆形头像，无需额外构建 Canvas 或借助 CSS 实现； - 渐变揭示动画：随时间逐步扩大裁剪路径（如从点扩展成圆），内容会渐进显现出来；
- 避免过度使用：频繁的 save/restore 操作会带来性能开销，而且复杂路径裁剪在低端设备上可能触发软件渲染，需要在实际环境中进行测试；
- 注意坐标系：clip 会作用于当前的变换状态（例如已执行
translate()或scale()），路径坐标必须对应当下的上下文环境。
