核心是使canvas物理像素、css尺寸与绘图坐标系三者对齐：需同步设置style宽高、canvas宽高（×dpr）及ctx.scale(dpr,dpr)，文字居中用textalign="center"/textbaseline="middle"配整数坐标，禁用半像素和透明背景防模糊。
核心是让 canvas 的物理像素、CSS 显示尺寸和绘图坐标系三者对齐。错位不是文字或图形本身画得不准，而是设备像素比（dpr）拉伸了底层像素网格，而 fillText、lineTo 这些操作仍按 CSS 像素逻辑执行，导致落点偏移半像素、触发抗锯齿、基准线漂移。
正确设置 canvas 尺寸与缩放
必须同步调整三个地方，缺一不可：
- 用 canvas.style.width / height 固定视觉大小（比如 "400px"、"300px"），这是用户看到的区域
- 将 canvas.width / height 设为
clientWidth × dpr和clientHeight × dpr，确保缓冲区覆盖全部物理像素 - 调用 ctx.scale(dpr, dpr)，使后续所有绘图命令（包括 fillText 的 x/y）继续写 CSS 像素值，无需手动乘 dpr
文字对齐要配合缩放后的坐标系
scale 后 textAlign 和 textBaseline 行为不变，但它们作用的坐标是你“写出来的 CSS 像素值”，所以只要逻辑一致，就不会漂移：
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 水平居中：设
ctx.textAlign = "center"，再填fillText(text, centerX, y)，其中 centerX 是容器 CSS 宽度的一半（如 200） - 垂直居中：用
ctx.textBaseline = "middle"，y 取 CSS 高度中点（如 150），避免依赖 alphabetic 基线去猜 - 绝对不要在 scale 后又把 y 手动 × dpr，否则坐标被放大两次，严重下移
防止模糊的辅助细节
即使尺寸和缩放都对了，字体仍可能发虚：
- 确保 fillText 的 x/y 是整数（如 200、150），避免半像素触发亚像素抗锯齿
- 细线或 1px 图形建议关闭插值：
ctx.imageSmoothingEnabled = false - 背景色别用半透明（如 rgba(0,0,0,0.3)），透明叠加会加剧边缘混色
不复杂但容易忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
