Canvas 的 clip() 方法建立动态遮罩而非擦除内容，需闭合路径、配合 save/restore 管理状态，并支持 nonzero/evenodd 规则实现复合遮罩，适用于头像裁剪、渐变揭示等场景。
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()），路径坐标需对应当前上下文。
