Canvas 像素失真是因物理像素与逻辑像素不匹配导致的插值模糊、边缘发虚或细节丢失，需通过适配 DPR、整数坐标绘制、禁用图像平滑及避免二次缩放等手段主动控制像素映射。
适配设备像素比（DPR）是基础
现代手机、MacBook 等设备的 DPR 常为 2 或 3，即 1 个 CSS 像素对应多个物理像素。若 canvas 的 width/height 属性仍按 CSS 尺寸设置（如 300×150），实际绘制区域就只有 300×150 个物理像素，浏览器会强行拉伸填充到更高密度屏幕，必然失真。
- 用
getBoundingClientRect()获取 canvas 在页面中的真实 CSS 尺寸（避免用clientWidth受 margin/padding 干扰） - 将
canvas.width和canvas.height设为CSS 宽高 × DPR - 再用
ctx.scale(dpr, dpr)把绘图坐标系“缩回”到 CSS 逻辑空间，这样你写fillRect(10,10,20,20)仍表示 10px 位置，但背后已占用 20 个物理像素
确保绘图坐标和尺寸为整数
Canvas 对非整数坐标（如 x = 10.3）会启用抗锯齿混合，让线条边缘变灰、变软，看起来模糊。尤其在绘制 1px 线条、小图标或文字时特别明显。
Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）
下载
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
- 对所有坐标、宽高做
Math.round()或Math.floor()处理，例如：ctx.fillRect(Math.round(x), Math.round(y), Math.round(w), Math.round(h)) - 避免用
transform或scale()后直接画小尺寸图形，因为变换可能引入浮点误差 - 文字绘制前可临时关闭抗锯齿：
ctx.textBaseline = 'top'; ctx.font = '14px sans-serif';，并优先用整数fillText坐标
控制图像缩放质量
用 drawImage() 缩放图片时，浏览器默认使用双线性插值，容易糊掉锐利边缘。特别是放大低分辨率图或像素画时问题突出。
- 禁用图像平滑：
ctx.imageSmoothingEnabled = false;（适用于像素艺术、UI 图标等需硬边场景） - 若需高质量缩放（如图表中高清图片），可预加载适配 DPR 的原图资源（例如 DPR=2 时加载 @2x 图片）
- 避免用 CSS
width/height或transform: scale()缩放整个 canvas 元素——这属于“二次缩放”，会叠加模糊
留意背景与合成设置
半透明背景或全局 alpha 会影响像素混合结果。例如 ctx.globalAlpha = 0.9 或 canvas 父容器有 opacity，会让每个绘制操作都参与混合计算，削弱边缘对比度。
- 保持 canvas 本身无透明背景（
style.background = 'white'或清空时用ctx.clearRect()） - 慎用
globalCompositeOperation中的混合模式（如'lighter'），它们会改变像素叠加逻辑 - 必要时用
ctx.setTransform(1,0,0,1,0,0)重置变换矩阵，防止累积浮点误差
