Canvas 的 clip() 方法本质是设置遮罩区域，后续绘图仅在该区域内生效，外部内容不受影响；需配合 beginPath、闭合路径、save/restore 使用，并支持 nonzero/evenodd 填充规则实现复合遮罩。
Canvas 的 clip() 方法本质是设置一个“遮罩区域”，之后所有绘图操作只在该区域内生效，外部图层内容不会被覆盖或修改——它不是擦除，而是视觉屏蔽。
clip() 的核心机制：路径定义 + 区域锁定
clip 不直接操作像素，而是基于当前路径生成一个裁剪上下文。关键点有三个：
- 必须先调用
beginPath()，再用rect()、arc()、lineTo()等构建闭合路径，否则clip()无效； - 调用
clip()后，后续所有绘图（包括fillRect()、drawImage()、fillText()）自动被限制在该路径内； - 裁剪区域叠加生效：连续调用多次
clip()会形成交集区域（后一次 clip 在前一次基础上进一步收缩）。
保护外部图层的关键：save() 和 restore() 必须配对使用
clip 是状态级操作，一旦设置，会持续影响后续所有绘制，直到显式恢复。若不加控制，画布会越切越小，导致后续内容无法显示。
正确做法是把裁剪逻辑包裹在 save() 和 restore() 之间：
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
ctx.save()：保存当前全部绘图状态（含裁剪路径、颜色、线宽等）； - 执行路径定义 →
clip()→ 绘图操作； -
ctx.restore()：完全还原到 save 时的状态，裁剪区域自动清除，外部图层不受任何影响。
示例：仅在圆形区域内绘制文字，不影响画布其余部分
ctx.save();ctx.beginPath();
ctx.arc(200, 150, 100, 0, Math.PI * 2);
ctx.clip();
ctx.fillStyle = "#333";
ctx.font = "bold 24px sans-serif";
ctx.fillText("Hello", 180, 155);
ctx.restore(); // 外部图层完好如初
多区域裁剪与复合遮罩技巧
想实现“圆形+矩形”联合遮罩？或“圆形中挖空一个小圆”？靠 fillRule 参数可精准控制：
-
clip("nonzero")（默认）：按路径方向计算环绕数，适合常规遮罩； -
clip("evenodd")：奇偶判断填充，可用于“挖空”效果。例如顺时针画大圆、逆时针画小圆，再用clip("evenodd")，小圆区域将被排除在裁剪区外。
注意：多个路径需在同一次 beginPath 中定义，再统一调用 clip，不能分两次 clip。
常见误区与规避方式
容易误以为 clip 能“还原已绘制内容”，其实它只约束后续操作。已有图形不会被擦除，也不会因 clip 改变位置或大小。
- ❌ 错误：先画背景，再 clip，再画前景 → 前景被裁剪，但背景仍完整可见（未受保护）；
- ✅ 正确：若要“只让某区域显示新内容，其余保持原样”，应在 clip 前用
save()保存初始状态，并确保 clip 后的绘制不覆盖关键区域； - ⚠️ 注意：clip 不支持透明度叠加，也不改变 alpha 值，它只是硬性裁剪像素输出范围。
