要让Canvas在高清屏精准还原设计稿，必须动态适配DPR、坐标尺寸全部取整、关闭抗锯齿等干扰特性，并用离屏Canvas预渲染静态内容。
要在高清屏（如 Retina、4K 显示器）上让 Canvas 绘图精准还原设计稿，关键不是“画得更细”，而是让每个逻辑像素严格对齐物理像素网格。核心矛盾在于：设计稿按 CSS 像素（逻辑像素）交付，而高清屏用更多物理像素渲染同一 CSS 尺寸。若不干预，Canvas 会默认按逻辑像素分配缓冲区，导致绘图被浏览器插值拉伸，线条发虚、文字毛边、1px 变成 1.5px。
一、必须动态适配设备像素比（DPR）
这是清晰显示的底层前提，跳过这步其他优化效果有限：
- 用
window.devicePixelRatio获取当前设备真实 DPR（如 iPhone 是 2 或 3，MacBook Pro 常为 2） - 通过
canvas.getBoundingClientRect()拿到它在页面中的 CSS 宽高（比如 800×600px） - 把 canvas 元素的
width和height属性设为：cssWidth × dpr和cssHeight × dpr - 再用 CSS 把显示尺寸强制设回原始值：
canvas.style.width = '800px'; canvas.style.height = '600px'; - 最后对 2D 上下文执行
ctx.scale(dpr, dpr)，这样你写fillRect(10,10,100,100)仍按设计稿的“CSS 像素”理解，但实际绘制在整数物理像素上
二、所有坐标与尺寸必须取整
哪怕只差 0.1 像素，浏览器就会启用亚像素渲染，混合相邻物理像素颜色，直接导致模糊：
- 绘制前对
x、y、width、height等全部调用Math.round()（不用floor，避免整体偏移） - 画线时，起点和终点都要取整，例如：
ctx.moveTo(Math.round(x1), Math.round(y1)) - 设置
lineWidth必须是整数，且推荐 1、2、4 这类能被 DPR 整除的值（DPR=2 时，lineWidth=1实际占 2 物理像素，最锐利） - 文字绘制前统一基线：
ctx.textBaseline = 'top'; ctx.textAlign = 'left';，再对x、y取整
三、关闭干扰性渲染特性
Canvas 默认开启的平滑机制，对图像缩放友好，但对矢量图形和 UI 元素是“敌人”：
- 禁用图像缩放抗锯齿：
ctx.imageSmoothingEnabled = false; - 禁用文字抗锯齿（对小字号尤其有效）：
ctx.textRendering = 'optimizeLegibility';或更激进的'geometricPrecision' - 避免使用半透明色绘制线条或边框（如
rgba(0,0,0,0.8)），它会强制触发混合计算，加剧模糊
四、用离屏 Canvas 预渲染复杂静态内容
当设计稿含大量重复元素（如图标网格、背景纹理、表格框架），直接逐帧重绘易出错且性能低：
- 创建一个离屏
canvas（不插入 DOM），按 DPR 设置其宽高 - 一次性把静态结构（如带圆角的卡片底色、分割线、图标轮廓）完整绘制上去
- 主画布每次只需
ctx.drawImage(offscreenCanvas, 0, 0)合成，既保证精度，又避免重复计算坐标 - 特别适合响应式场景：窗口缩放时，仅需重置离屏 canvas 尺寸并重绘一次，主画布无需调整
做到这四点，Canvas 就能稳定输出媲美 Sketch 或 Figma 导出的像素级精度效果，不再是“差不多就行”的示意稿。
