clip()必须先定义路径再调用才生效，否则裁剪区域为空；多次clip取交集，重置需save/restore；drawImage受目标区域裁剪影响；clearRect也受其限制。
clip() 必须配合路径绘制调用，单独调用无效
很多人调用 ctx.clip() 后发现绘图没被裁剪，根本原因是：Canvas 的裁剪路径不是“设置一个矩形坐标就生效”，而是必须先用 ctx.beginPath() + 路径绘制方法（如 ctx.rect()、ctx.arc()、ctx.lineTo()）定义好路径，再调用 ctx.clip() 才会将当前路径设为裁剪区域。
常见错误写法：
ctx.clip(); // ❌ 没有路径，裁剪区域是空的，后续所有绘制都会消失
正确流程是：
- 调用
ctx.beginPath() - 用
ctx.rect(x, y, w, h)或其他路径方法画出你想要的裁剪形状 - 调用
ctx.clip()（此时才真正提交裁剪路径） - 再调用
ctx.fillRect()、ctx.drawImage()等绘图操作
裁剪区域是叠加的，多次 clip 会取交集
每次调用 ctx.clip() 都不是“覆盖”上一次裁剪，而是和当前裁剪区域求交集。这意味着如果你连续调用两次 clip()，最终生效的是两个路径重叠的部分。
立即学习“前端免费学习笔记（深入）”；
例如：
ctx.beginPath(); ctx.rect(0, 0, 100, 100); ctx.clip(); // 裁剪为左上角 100×100 区域 ctx.beginPath(); ctx.rect(50, 50, 100, 100); ctx.clip(); // 新裁剪区域与上一个求交 → 实际只剩 (50,50) 到 (100,100)
想重置裁剪区域，得用 ctx.save() / ctx.restore() 或清空 canvas 后重绘。直接调用 ctx.resetClip() 是不存在的（该方法仅在部分新浏览器实验性支持，不可靠）。
drawImage 被 clip 限制时要注意源图尺寸和坐标系对齐
当用 ctx.drawImage() 绘制图片并受 clip() 限制时，裁剪判断依据是「目标区域」（即图片被画到 canvas 上的位置），而不是图片本身内容。容易踩坑的点：
- 如果
drawImage(img, dx, dy)中dx/dy落在裁剪区外，整张图都不会显示 - 即使图片很大，只要目标绘制起点
(dx, dy)在裁剪区内，且有重叠像素，就会显示重叠部分 - 缩放参数（如
drawImage(img, dx, dy, dw, dh)）会影响目标区域大小，进而影响是否被裁掉
调试建议：先用 ctx.fillRect() 画个纯色块确认裁剪区域位置和大小，再叠加图片。
clip() 不影响 strokeStyle/fillStyle 等状态，但影响所有后续绘制原语
clip() 是 canvas 渲染状态的一部分，它不改变颜色、线宽、阴影等设置，但会作用于之后所有绘制操作，包括：
-
ctx.fillRect()、ctx.fill() -
ctx.strokeRect()、ctx.stroke() ctx.drawImage()-
ctx.fillText()、ctx.strokeText()
注意：ctx.clearRect() 也受裁剪限制 —— 它只清除裁剪区域内的像素，不是全 canvas。这点常被忽略，导致“清不干净”的错觉。
复杂图形裁剪时，最易被忽略的是路径闭合与非零填充规则的影响：默认 clip() 使用 non-zero winding rule，如果路径自相交或未闭合，裁剪结果可能反直觉。稳妥做法是总用 ctx.closePath()，或显式传 "evenodd" 第二参数（需浏览器支持）。
