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); // 图片按裁剪区显示
正六边形（需计算顶点）：
const cx = 150, cy = 150, r = 100;
ctx.beginPath();
for (let i = 0; i < 6; i++) {
const angle = (i * Math.PI) / 3;
const x = cx + r * Math.cos(angle);
const y = cy + r * Math.sin(angle);
if (i === 0) ctx.moveTo(x, y);
else ctx.lineTo(x, y);
}
ctx.closePath();
ctx.clip();心形路径（贝塞尔曲线构成）：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
ctx.beginPath(); ctx.moveTo(100, 80); ctx.bezierCurveTo(120, 40, 160, 40, 180, 80); ctx.bezierCurveTo(200, 120, 200, 160, 180, 180); ctx.bezierCurveTo(160, 200, 120, 200, 100, 180); ctx.bezierCurveTo(80, 160, 80, 120, 100, 80); ctx.clip();
三、交互增强：悬停缩放 + 裁剪动画
利用 requestAnimationFrame 动态更新裁剪路径或图片位置，可实现平滑过渡效果：
- 鼠标移入时，逐步扩大裁剪圆半径（配合
save()/restore()隔离状态） - 结合
transform（如scale()）对图片做局部放大，再裁剪，模拟“聚焦”效果 - 点击切换裁剪形状？可预存多组路径函数，点击时重绘并重新
clip()
? 提示：裁剪本身不触发重绘，所有交互逻辑需手动清空画布（clearRect()）、重设路径、重裁剪、重绘图。
四、避坑要点
裁剪路径未闭合 → 无效果或意外全屏裁剪
忘记 save() → 后续所有绘制都被上一个 clip() 影响
图片尺寸/坐标未适配路径中心 → 图片偏移或只显示一角
高DPI屏幕（如Retina）未缩放 canvas → 图片模糊，裁剪边缘锯齿明显（需设置 canvas.width/height 为物理像素，并用 CSS 缩放）
