要在高分屏下实现canvas锐利线条，需按dpr缩放缓冲区并设ctx.scale(dpr,dpr)，再用半像素偏移（如x=10.5）对齐物理像素中心，同时禁用imagesmoothingenabled和抗锯齿。

要在高分屏（如 Retina、2K/4K 屏）下让 Canvas 绘制出锐利的像素级线条，关键不是“画得更细”，而是让逻辑坐标与物理像素严格对齐，并绕过浏览器自动插值缩放。模糊的本质是：你用 1px 宽度在 DPR=2 的设备上画线，Canvas 缓冲区只有 1 个逻辑像素高，却被拉伸到 2 个物理像素渲染——系统只能插值，结果发虚。

设置 Canvas 物理尺寸匹配设备像素比

必须动态读取 window.devicePixelRatio，并用它放大 Canvas 的内部缓冲区尺寸，同时保持 CSS 显示尺寸不变：

• 获取当前 DPR：const dpr = window.devicePixelRatio || 1
• 设 CSS 尺寸（用户看到的大小）：canvas.style.width = '300px'; canvas.style.height = '200px';
• 设 HTML width/height 属性（实际绘图缓冲区）：canvas.width = 300 * dpr; canvas.height = 200 * dpr;
• 最后告诉上下文按 DPR 缩放坐标系：ctx.scale(dpr, dpr);

使用半像素偏移避免抗锯齿模糊

Canvas 在绘制 1px 线条时，若坐标落在整数网格上（如 x=10, y=10），浏览器会把线“铺开”在两个物理像素之间，触发抗锯齿。解决方法是让线条中心精准落在物理像素中心：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

• 对 DPR=2 的设备，物理像素中心在 0.5、1.5、2.5… 这类半整数位置
• 所以绘制竖直线时，用 ctx.moveTo(10.5, 0); ctx.lineTo(10.5, 100);
• 绘制横线同理：ctx.moveTo(0, 20.5); ctx.lineTo(100, 20.5);
• 如果已执行 ctx.scale(dpr, dpr)，则传入的坐标需先除以 DPR 再加 0.5，即：`x = Math.round(x) + 0.5 / dpr`

禁用图像平滑与全局抗锯齿

某些操作（如 drawImage、缩放后重绘）可能意外启用插值，需显式关闭：

• 关闭图片缩放插值：ctx.imageSmoothingEnabled = false;
• 禁用文字抗锯齿（如需像素字体效果）：ctx.textRendering = 'optimizeSpeed'; 或 ctx.font = '16px px-font'; 配合位图字体
• 避免用 transform: scale() 或 CSS zoom 缩放 Canvas 元素——这会二次触发插值

验证是否生效的小技巧

画一条 1px 宽、从 (0.5, 0.5) 到 (100.5, 0.5) 的水平线，在 DPR=2 设备上应呈现为清晰、无灰边的单行亮色像素；用手机截屏放大查看，边缘应无过渡色。若仍模糊，检查是否遗漏了 ctx.scale(dpr, dpr)，或 CSS 尺寸与 HTML 属性未同步。