canvas 的 clip() 方法是划定只允许后续绘图的窗口，不裁剪图像本身；需先定义闭合路径再调用 clip()，配合 save()/restore() 控制作用域，并支持复合裁剪与填充规则。
Canvas 的 clip() 方法不是“裁掉图像”，而是划定一个“只允许绘制的窗口”——后续所有绘图操作（包括 drawImage()）自动被限制在这个路径范围内，区域外的内容不显示，也不影响已有图层。
必须先画路径，再调用 clip()
clip() 本身不画任何东西，它只依据上一步定义的闭合路径生效：
- 调用
ctx.beginPath()开始新路径 - 用
moveTo()、lineTo()、arc()或rect()等方法连出多边形或任意闭合形状 - 显式调用
ctx.closePath()—— 很多浏览器对未闭合路径会忽略 clip，别依赖自动闭合 - 紧接着执行
ctx.clip()，此时裁剪区域才真正建立
裁剪后绘图只在区域内可见
设置好裁剪区后，drawImage()、fillRect()、fillText() 等都会自动被裁切：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 例如：画一个五角星路径 → clip() → drawImage(img, 0, 0)，结果只有星形区域显示图像，其余透明
- 注意：clip() 不修改已绘制内容，只约束之后的操作；它也不改变图像原始数据，导出时需确保逻辑复现
- 高 DPI 屏幕下，路径坐标要按
window.devicePixelRatio缩放，否则裁剪边缘错位或模糊
务必用 save() 和 restore() 控制作用范围
clip() 是状态级操作，一旦设置就会持续生效，直到重置。不包裹就容易“越切越小”：
- 开始前调用
ctx.save()，保存当前完整绘图状态（含默认裁剪区） - 路径 → clip() → 绘图，全部在这对括号内完成
- 结束后立即
ctx.restore()，裁剪区自动清除，后续绘图恢复全画布范围 - 避免嵌套过深；复杂场景可先在离屏 canvas 中预合成图形，再整体裁剪
支持复合裁剪和填充规则
连续调用 clip() 会形成交集区域（后一次在前一次基础上再收缩），适合做镂空、叠加蒙版等效果：
-
ctx.clip()默认使用 non-zero 填充规则（按路径方向判断内部） - 需要奇偶判断（如星形中间镂空），可用
ctx.clip('evenodd') - 想检测某点是否在裁剪区内？用
ctx.isPointInPath(x, y)，但注意它只判断最后一次 beginPath 定义的路径，不是当前 clip 区域
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
