HTML5 Canvas中实现自由旋转裁剪框需手动绘制旋转四边形路径并clip，导出时用离屏Canvas+transform对齐方向贴图，DOM overlay仅作视觉反馈，所有计算须基于真实像素坐标并统一弧度单位。
在 HTML5 Canvas 中实现“自由旋转裁剪框”（即裁剪框本身可绕中心旋转，而非仅图像旋转），关键不是旋转图像，而是让裁剪区域的几何形状支持任意角度——这需要脱离传统 ctx.rect() 的轴对齐矩形思路，改用路径（ctx.beginPath() + ctx.moveTo() + ctx.lineTo()）手动绘制带旋转的四边形，并结合坐标变换计算像素级裁剪范围。
裁剪框旋转 ≠ 图像旋转，需独立建模
用户看到的“旋转裁剪框”，本质是一个可拖拽、缩放、且带旋转角（rotationAngle）的四边形区域。它和图像是否旋转无关——即使图像没动，裁剪框也能斜着框选。因此不能依赖 ctx.rotate() 全局变换，否则整个绘图上下文都会被扰动，影响 overlay 交互与坐标映射。
- 裁剪框数据应单独维护：中心点
(cx, cy)、宽高(cw, ch)、旋转角θ - 每次渲染前，用三角函数算出四个顶点坐标：
x = cx + (±cw/2)×cosθ ∓ (±ch/2)×sinθy = cy + (±cw/2)×sinθ ± (±ch/2)×cosθ - 用
ctx.moveTo()和ctx.lineTo()连成闭合路径，再ctx.clip()—— 此时裁剪生效范围就是这个斜向四边形
真正裁剪图像像素，得配合 drawImage 截取+合成
ctx.clip() 只控制后续绘制的可见区域，不改变原始图像数据。要导出“旋转裁剪后的新图”，必须走两步：
- 先在离屏 canvas 中完整绘制原图（含图像自身旋转逻辑，如需）
- 再创建一个新 canvas，尺寸设为裁剪框外接矩形（
Math.abs(cw×cosθ) + Math.abs(ch×sinθ)等），用ctx.transform()将该 canvas 坐标系对齐裁剪框方向，然后drawImage(离屏canvas, ...)按斜向映射贴图 - 最终调用
newCanvas.toDataURL()得到真正旋转裁剪后的图片
交互控制：用 CSS transform 模拟旋转手柄更轻量
纯 Canvas 绘制旋转裁剪框的拖拽/旋转交互开发成本高。更实用的做法是：用 DOM 元素（如 <div class="crop-handle">）叠加在 canvas 上，通过 style.transform = `rotate(${angle}deg)` 视觉呈现旋转效果，同时把角度值同步给底层裁剪数据模型。
立即学习“前端免费学习笔记（深入）”；
- 监听鼠标/触摸事件，计算相对中心的旋转弧度变化
- 更新
rotationAngle并重绘 canvas 裁剪路径（或 DOM overlay） - DOM 层只负责视觉反馈，所有裁剪计算仍基于数学顶点，确保像素精度
注意坐标系一致性，避免“看着对、导出错”
常见错误是混用三套坐标：CSS 渲染坐标、Canvas 逻辑像素坐标、用户感知的“屏幕视觉坐标”。尤其当 canvas 用 style.width/height 缩放显示时，必须用 canvas.width / canvas.style.width 计算缩放比，把鼠标位置换算成真实 canvas 像素坐标，再代入旋转公式。
- 所有顶点计算、clip 路径、drawImage 参数，都必须基于
canvas.width和canvas.height对应的像素空间 - overlay DOM 元素的
left/top需按比例换算：cssLeft = pixelX * scaleRatio - 旋转角度统一用弧度，避免
Math.PI / 180漏乘或重复乘
