高清屏Canvas像素对齐的关键是让逻辑坐标严格落在物理像素网格上，需按devicePixelRatio同步缩放canvas宽高并用CSS控制显示尺寸，再用ctx.scale(dpr,dpr)统一坐标系，同时关闭imageSmoothingEnabled、取整坐标、调整文字对齐方式。
高清屏画布适配图像绘制时的像素对齐，关键不是“把图画准”，而是让每个逻辑坐标点严格落在物理像素网格上。否则哪怕尺寸设置正确，图形边缘、线条、文字仍会发虚、偏移或出现半透明锯齿。
确保 canvas 物理尺寸与设备像素比对齐
像素对齐的前提是画布缓冲区本身有足够且整数倍的物理像素。必须用 window.devicePixelRatio 同步放大 canvas.width 和 canvas.height，同时用 CSS 控制显示尺寸：
- 获取设计宽高（如 600×400 CSS 像素）和当前 dpr（比如 2）
- 设
canvas.width = 600 * dpr、canvas.height = 400 * dpr - 设
canvas.style.width = "600px"、canvas.style.height = "400px" - 缺一不可：只改 CSS 尺寸 → 拉伸模糊；只改 DOM 尺寸 → 布局错乱
用 ctx.scale(dpr, dpr) 统一坐标系，避免手动换算
缩放绘图上下文后，所有 drawImage、fillRect、lineTo 等操作仍按原始 CSS 像素坐标书写，但底层自动映射到物理像素网格：
- 调用
ctx.scale(dpr, dpr)后，ctx.fillRect(10, 10, 20, 20)实际绘制在物理像素 (20,20) 到 (40,40) 区域（dpr=2 时） - 不缩放而手动乘 dpr 容易遗漏、出错，尤其涉及小数坐标或循环绘制时
- 注意：scale 会影响所有后续绘制，包括字体、阴影、渐变，需统一考虑
图像绘制时强制关闭插值，防止拉伸失真
用 drawImage 渲染图片（尤其是像素图、图标、位图素材）时，默认双线性插值会柔化边缘。高清屏下更明显：
立即学习“前端免费学习笔记（深入）”；
- 在缩放前设
ctx.imageSmoothingEnabled = false - 适用于像素艺术、UI 图标、地图瓦片等需要硬边的场景
- 若需平滑（如照片），可保留 true，但务必确保源图分辨率已按 dpr 提前准备（例如 2x 图）
处理非整数坐标导致的亚像素渲染
即使 canvas 和 ctx 都已适配，如果传入 fillRect(10.5, 10.5, 20, 20) 这类带小数的坐标，浏览器仍会做抗锯齿混合，破坏像素对齐：
- 对齐关键图形（如 UI 边框、网格线、文字 baseline）时，坐标应取整：
Math.round(x) - 使用
ctx.translate(0.5, 0.5)可将 1px 线绘制在物理像素中心（适合描边） - 文字绘制建议用
ctx.textAlign = "left"+ctx.textBaseline = "top"配合整数 y，避免 font 渲染浮动
