canvas 的 clip() 方法通过定义闭合路径限制后续绘制区域，实现复杂形状抠图；需先 beginpath() 构建路径，支持变换与堆栈管理，配合 save()/restore() 控制裁剪范围。
Canvas 的 clip() 方法能将后续绘制限制在指定路径内，实现类似“复杂形状抠图”的效果——不是直接擦除像素，而是定义一个可绘制的“窗口”，超出区域的内容不会显示。
clip() 的基本原理和关键规则
调用 clip() 前必须先用 beginPath() + 路径方法（如 rect()、arc()、moveTo()/lineTo() 等）构建闭合路径；否则剪辑无效。剪辑区域基于当前变换矩阵（如 scale()、rotate()、translate()），且具有堆栈特性：每次 save() 保存当前裁剪状态，restore() 恢复上一层裁剪范围。
用路径组合创建不规则抠图区域
真正实现“复杂形状”（如心形、星形、文字轮廓、多边形镂空）的核心是构造精确的路径。Canvas 本身不提供高级图形布尔运算，但可通过多次 clip() 配合 globalCompositeOperation 或分层绘制模拟效果：
- 使用
bezierCurveTo()或quadraticCurveTo()绘制平滑曲线轮廓 - 用
isPointInPath(x, y)预判某点是否在剪辑区内（适合交互反馈） - 对文字抠图：先用
fillText()渲染文字到离屏 canvas，再用getImageData()提取 alpha 通道生成路径（需算法辅助，非原生支持）
实用抠图操作步骤（以五角星为例）
假设要在图片上只显示五角星区域内的内容：
- 获取 canvas 上下文：
const ctx = canvas.getContext('2d'); - 绘制五角星路径（确保闭合）：
ctx.beginPath(); /* 插入五角星顶点计算与 lineTo */ ctx.closePath(); - 设置剪辑：
ctx.clip(); - 绘制图片：
ctx.drawImage(img, 0, 0);—— 此时仅星形区域内可见 - 如需继续绘其他内容（不限于该区域），调用
ctx.restore();前应先ctx.save();保存剪辑状态
注意事项与常见陷阱
clip() 不影响已绘制内容，只约束后续绘制行为；它不可逆，也无法直接获取当前剪辑路径。若忘记 closePath()，部分浏览器可能不执行裁剪；在高 DPI 屏幕上，需注意将路径坐标按 devicePixelRatio 缩放，否则剪辑边缘模糊或偏移。另外，过度嵌套 save()/restore() 可能带来性能开销，复杂场景建议用离屏 canvas 预合成再裁剪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
