图像裁剪工具旋转微调需坚持原图重绘、中心锚定、浮点直传：用变量控制角度并动态转弧度，每次清空canvas后从原始图像重新translate→rotate→drawimage，导出时按外接矩形设画布尺寸并保留原始浮点角度。
图像裁剪工具中实现旋转角度微调，核心不是“边拖边转图”，而是精准控制 Canvas 绘图上下文的坐标系变换顺序与数值精度。微调的关键在于：分离旋转逻辑与裁剪逻辑、用可变变量承载角度、避免累积误差，并确保每次重绘都基于原始图像——而不是上一次旋转后的画布。
用变量控制旋转角度，支持实时增减
不要把角度写死在 rotate() 里，而是声明一个可修改的 angle 变量（单位为度），再在每次绘制前动态转换为弧度：
- 定义 let rotationAngle = 0;（初始为 0°）
- 提供按钮或滑块触发 rotationAngle += 0.5; 或 -= 0.5;（0.5° 是常用微调粒度）
- 绘制时统一用 ctx.rotate(rotationAngle * Math.PI / 180);
每次重绘都从原始图像出发，不复用 canvas 内容
常见错误是反复 rotate + drawImage 到同一 canvas，导致角度叠加失真、像素模糊。正确做法是：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 每次角度变化后，清空 canvas（ctx.clearRect(0, 0, canvas.width, canvas.height)）
- 重新加载原始 img 对象（或缓存其 data URL），再执行完整流程：translate → rotate → drawImage
- 这样能保证每次旋转都是“原图→指定角度”，无中间渲染损耗
旋转中心必须精确锚定图像几何中心
微调对齐敏感，若旋转点偏移，小角度变化也会造成明显视觉漂移。务必按以下步骤设置原点：
- 先用 ctx.translate(img.width / 2, img.height / 2); 将坐标系原点移到图像中心
- 再调用 ctx.rotate(...)
- 最后用 ctx.drawImage(img, -img.width / 2, -img.height / 2); 把图像中心对准新原点
- 若图像已缩放或居中显示，需同步计算其实际渲染宽高，用对应中心值替代 img.width/height
导出时保留微调精度，避免四舍五入截断
用户调到 17.3°，导出结果不能变成 17°。关键在 toDataURL 前确保：
- canvas.width / height 已设为足够容纳旋转后外接矩形的尺寸（例如原图 300×300，旋转 17.3° 后最小外接框 ≈ 312×312）
- drawImage 的源区域（sx, sy, sWidth, sHeight）仍取原始图像全尺寸，不因角度改变而缩放裁剪源
- 导出前不手动 round(rotationAngle)，直接传入原始浮点值参与计算
真正影响体验的不是能不能转，而是转得稳、调得细、导得准。只要守住“原图重绘+中心锚定+浮点直传”这三条线，0.1° 级别的微调就能稳定响应。
