Canvas 的 clip() 方法通过路径定义遮罩区域实现异形图片裁剪，流程为：定义闭合路径→调用 clip()→drawImage；需配合 save()/restore() 管理绘图状态，支持圆形、六边形等任意形状裁剪。
Canvas 的 clip() 方法能将后续绘制内容限制在指定路径内，实现异形图片裁剪展示——关键在于先定义路径、再调用 clip()、最后绘制图片。
一、基础裁剪流程：路径 → clip() → drawImage
Canvas 裁剪不是直接“修改图片”，而是设置一个**当前绘图状态的遮罩区域**。必须严格按顺序执行：
- 用
beginPath()开始新路径 - 用
arc()、rect()、moveTo()/lineTo()等绘制闭合形状（务必闭合，如用closePath()） - 立即调用
ctx.clip()激活裁剪区 - 再用
ctx.drawImage()绘制图片——只有落在裁剪路径内的部分可见
⚠️ 注意：clip() 只影响其后绘制的内容；每次新裁剪前建议用 ctx.save() / ctx.restore() 保存和恢复状态，避免污染后续绘制。
二、常用异形示例：圆形、六边形、心形
圆形头像（最常用）：
ctx.beginPath(); ctx.arc(100, 100, 80, 0, Math.PI * 2); ctx.clip(); // 裁剪生效 ctx.drawImage(img, 20, 20, 160, 160); // 图片按裁剪区显示
正六边形（需计算顶点）：
requestAnimationFrame
- 鼠标移入时，逐步扩大裁剪圆半径（配合
save()/restore()隔离状态） - 结合
transform（如scale()）对图片做局部放大，再裁剪，模拟“聚焦”效果 - 点击切换裁剪形状？可预存多组路径函数，点击时重绘并重新
clip()
? 提示：裁剪本身不触发重绘，所有交互逻辑需手动清空画布（clearRect()）、重设路径、重裁剪、重绘图。
四、避坑要点
裁剪路径未闭合 → 无效果或意外全屏裁剪
忘记 save() → 后续所有绘制都被上一个 clip() 影响
图片尺寸/坐标未适配路径中心 → 图片偏移或只显示一角
高DPI屏幕（如Retina）未缩放 canvas → 图片模糊，裁剪边缘锯齿明显（需设置 canvas.width/height 为物理像素，并用 CSS 缩放）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
