要在高清屏实现Canvas物理像素对齐，需同步设置canvas宽高为CSS尺寸×dpr、用ctx.scale(dpr,dpr)统一坐标系、绘制时坐标取整对齐像素中心，并通过CSS控制显示尺寸。
要在高清屏上实现 Canvas 物理像素对齐，核心是让绘制操作精准落在设备物理像素网格上，而不是漂浮在亚像素位置。这需要同步处理画布尺寸、坐标系缩放和绘图坐标三者关系，缺一不可。
设置匹配物理像素的 canvas 内部尺寸
Canvas 的 width 和 height 属性决定其实际可绘制的物理像素数量。必须用父容器的 CSS 尺寸乘以 window.devicePixelRatio 来赋值：
- 获取容器真实 CSS 尺寸：用
canvas.parentElement?.clientWidth或canvas.getBoundingClientRect() - 计算物理像素尺寸：
canvas.width = cssWidth * dpr，canvas.height = cssHeight * dpr - 避免使用
offsetWidth（含边框/滚动条）或style.width（可能为空字符串）
用 ctx.scale 统一绘图坐标系
仅放大内部尺寸会导致所有绘图坐标被“放大”，比如原本 fillText("A", 10, 20) 会跑到 (20, 40) 去。用 ctx.scale(dpr, dpr) 把坐标系拉回 CSS 像素逻辑，使你写的数字仍代表设计稿里的位置：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 调用
ctx.scale(dpr, dpr)必须在设置宽高后、任何绘制前执行 - 之后所有坐标（
strokeRect、fillText、drawImage）都按 CSS 像素写，无需手动乘 dpr - 若后续需局部取消缩放，可用
ctx.setTransform(1, 0, 0, 1, 0, 0)重置
确保绘制坐标落在像素中心
即使缩放正确，坐标若落在整数边界（如 y=10），浏览器仍可能做抗锯齿；要获得锐利线条和文字，需主动对齐像素中心：
立即学习“前端免费学习笔记（深入）”；
- 画 1px 边框：用
strokeRect(x + 0.5, y + 0.5, w, h) - 填充矩形或图像：确保
x、y、w、h都为整数，避免小数宽度引发插值 - 文字居中：设
ctx.textAlign = "center"、ctx.textBaseline = "middle"，再传入整数坐标（如fillText("OK", 200, 150)） - 关键位置可加
Math.round()强制取整，例如fillText(t, Math.round(x), Math.round(y))
保持 CSS 显示尺寸不变
Canvas 元素必须通过 CSS 控制视觉大小，否则浏览器会自动拉伸渲染结果造成模糊：
- 给 canvas 设置
style.width = "100%"或具体值（如"400px"），style.height同理 - 禁止只设 CSS 尺寸却不改
canvas.width/height属性——这是最常见模糊原因 - 响应式场景下，监听容器变化（推荐
ResizeObserver），每次触发都重新执行上述三步
