Canvas高分屏锯齿本质是逻辑像素与物理像素未对齐，需同步缓冲区尺寸、绘制坐标和缩放行为：先按devicePixelRatio重设canvas宽高并scale；画线时坐标加0.5对齐物理像素；文字用清晰字体+textRendering优化；最后监听resolution变化动态适配。
Canvas 在高分屏下文字和线条出现锯齿，本质不是“画得不够细”，而是逻辑像素与物理像素没对齐——浏览器把 1px 线条强行摊开到多个物理像素上，再用插值混合颜色，结果边缘发虚、文字重影。解决的关键是让绘制坐标、缓冲区尺寸、缩放行为三者严格按 window.devicePixelRatio 同步。
一、重设 canvas 缓冲区并启用上下文缩放
这是最基础也最容易漏掉的一步。仅改 CSS 宽高或只调 ctx.scale() 都会糊。
- 用
getBoundingClientRect()获取 canvas 当前显示区域（CSS 像素），再乘以dpr设置真实缓冲区尺寸：canvas.width = rect.width * dpr;canvas.height = rect.height * dpr; - 紧接着执行
ctx.scale(dpr, dpr)，这样你后续所有坐标（比如fillText(x, y)）仍用逻辑像素写，但实际落点精准对齐物理像素 - 别忘了同步设置 CSS 尺寸，保持视觉大小不变：
canvas.style.width = rect.width + "px";canvas.style.height = rect.height + "px";
二、线条和图形绘制时手动对齐物理像素
即使缓冲区正确，画 1px 线条仍可能跨像素导致抗锯齿。要让它真正压在整数物理像素上。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 绘制水平/垂直线时，坐标加
0.5：比如画横线ctx.moveTo(0, 10.5)、ctx.lineTo(200, 10.5)（前提是已执行ctx.scale(dpr, dpr)，此时 10.5 是逻辑坐标，对应物理像素边界） - 矩形边框建议用
strokeRect而非fillRect，并确保lineWidth是整数，且起始坐标带.5偏移 - 关闭图像平滑（对线条和文字有效）：
ctx.imageSmoothingEnabled = false;
三、文字渲染避免亚像素模糊
Canvas 文字天生容易发虚，尤其小字号。光靠缩放不够，需配合字体设置和渲染策略。
- 使用系统级清晰字体，例如：
ctx.font = "bold 14px -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif"; - 禁用文本抗锯齿（部分浏览器支持）：
ctx.textRendering = "optimizeLegibility";ctx.webkitFontSmoothing = "subpixel-antialiased";（慎用，iOS 可能失效） - 如果文字仍虚，可尝试将字号设为
dpr的整数倍（如 dpr=2 时用 12px、16px），再配合ctx.scale(dpr, dpr)，让字体轮廓完全落在物理像素网格内
四、响应设备变化，避免中途失配
用户切换显示器、调整系统缩放比例时，dpr 会变，但页面未必触发 resize。必须主动监听。
- 监听
matchMedia('(resolution)')变更：const media = window.matchMedia(`screen and (min-resolution: ${dpr}dppx)`);media.addEventListener('change', handleDPRChange); - 在
handleDPRChange中重新计算缓冲区、重设scale、清空并重绘（必要时） - 不要依赖
window.onresize单独处理——它无法捕获从 150% 缩放到 125% 这类无尺寸变化的 DPR 切换
