高清屏适配需按设备像素比（dpr）放大canvas内在分辨率并缩放绘制坐标：canvas.width/height设为逻辑尺寸×dpr，css宽高设为逻辑尺寸，ctx.scale(dpr,dpr)；裁剪缩放全程使用物理像素计算，导出时新建dpr倍离屏canvas确保清晰。
高清屏适配不是简单放大图片，而是让每个 CSS 像素对应多个物理像素。Canvas 在高清屏上模糊、裁剪错位、缩放失真，根本原因在于没对齐设备像素比（dpr）。关键动作是：创建时按 dpr 放大内在分辨率，绘制时用 scale() 保持逻辑坐标不变，裁剪缩放时全程使用物理像素坐标计算。
创建画布时必须匹配设备像素比
直接设 canvas.width = 800 是按 CSS 像素设置的，在 Retina 屏上实际只占 400×300 物理像素，图像必然模糊。正确做法：
- 获取当前设备像素比：
const dpr = window.devicePixelRatio || 1 - 设置画布内在宽高为
逻辑尺寸 × dpr（向下取整）：canvas.width = Math.floor(800 * dpr); canvas.height = Math.floor(600 * dpr) - 用 CSS 控制显示尺寸：
canvas.style.width = '800px'; canvas.style.height = '600px' - 获取上下文后立即缩放：
ctx.scale(dpr, dpr)——此后所有drawImage、fillRect坐标仍写 800×600，自动映射到高清物理像素
高清图裁剪必须基于处理画布，而非展示层
用户看到的是缩放后的 Canvas（比如 CSS 显示为 400×300），但裁剪区域坐标是鼠标在该 DOM 元素上获取的，需换算成原始处理画布的真实像素位置：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 记录鼠标在 canvas 元素上的
clientX/clientY - 减去 canvas 左上角相对于视口的偏移：
rect = canvas.getBoundingClientRect()，再算出相对坐标 - 换算为处理画布物理坐标：
realX = (x - rect.left) * dpr，同理算realY - 裁剪时用九参数
drawImage(source, sx, sy, sw, sh, dx, dy, dw, dh)，其中sx/sy/sw/sh全部使用换算后的物理像素值
缩放操作要区分“视觉缩放”和“绘制缩放”
用户拖拽缩放裁剪框，UI 上看起来在变大，但底层数据必须维持物理精度：
- 裁剪框的宽高、位置在内部始终以物理像素存储（即乘了 dpr 的值）
- 渲染裁剪框边框时，用
ctx.lineWidth = 2 / dpr保证线宽在所有屏幕都显示为 2 CSS 像素 - 导出裁剪结果时，新建一个离屏 canvas，宽高设为
cropWidth × dpr和cropHeight × dpr，再用drawImage精确贴入源图对应物理区域 - 最终调用
toDataURL('image/png', 1)，不压缩，保留全部清晰度
多层协作时各层独立适配
复杂场景常分层：底图层（静态）、裁剪框层（半透明 UI）、预览层（实时缩放效果）。每层都需单独适配：
- 底图层 canvas 创建时同样按 dpr 放大，一次性绘制原图，之后只
drawImage复用 - 裁剪框层 canvas 尺寸与主画布一致（CSS 尺寸），但内在分辨率也按 dpr 设置，确保描边和文字不糊
- 预览层若用另一个 canvas 实现局部放大，其宽高也需按 dpr 计算，且
drawImage的源区域坐标必须是物理像素
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
