canvas高分屏模糊的根本原因是物理像素不足：需同步设置canvas.width/height为css尺寸×dpr，并用style.width/height压回视觉尺寸，再通过ctx.scale(dpr,dpr)校准坐标系，确保1逻辑像素对应dpr物理像素。
Canvas 在高分辨率屏幕（如 Retina、2K/4K 显示器）下出现模糊，根本原因不是“画得不够细”，而是物理像素没撑够——画布的内部尺寸（width/height 属性）默认按 CSS 像素设置，但在高 DPR（devicePixelRatio）设备上，1 个 CSS 像素对应多个物理像素。若不放大画布缓冲区，浏览器只能靠插值拉伸渲染，必然发虚。
同步调整画布物理尺寸与 CSS 尺寸
必须同时处理两件事：让画布拥有足够多的物理像素，又不让它在页面上变大。
- 用
canvas.width = cssWidth * dpr和canvas.height = cssHeight * dpr提升内部缓冲区分辨率 - 用
canvas.style.width = cssWidth + 'px'和canvas.style.height = cssHeight + 'px'把显示尺寸压回设计值 - 别直接写死数值，推荐用
getBoundingClientRect()或clientWidth/clientHeight动态读取真实 CSS 尺寸
重置并缩放绘图上下文坐标系
光改画布尺寸还不够。此时 ctx 的坐标单位已变成“物理像素”，原来画在 (100, 100) 的矩形会偏右下——必须校准坐标系。
Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）
下载
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
- 每次重设尺寸后，先调用
ctx.setTransform(1, 0, 0, 1, 0, 0)清除旧变换 - 再执行
ctx.scale(dpr, dpr)，让所有后续绘图（fillRect、arc、drawImage）仍按逻辑像素坐标工作 - 这样你写
fillRect(0, 0, 200, 100)，实际就精准铺满 200×100 个 CSS 像素区域，对应 400×200 物理像素（DPR=2 时）
导出前检查常见陷阱
即使做了适配，toDataURL() 或 toBlob() 导出仍模糊，大概率是这些细节漏了：
- 重复执行
ctx.scale(dpr, dpr)—— 比如在 resize 监听里没做防重，导致缩放叠加（2×2=4 倍） - 设置了
canvas.width却忘了同步改canvas.style.width，画布被 CSS 拉伸覆盖 - 用
getBoundingClientRect().width赋值给canvas.width，但没除以dpr，结果物理像素反而更少 - 导出前没清空画布（
ctx.clearRect(0, 0, canvas.width, canvas.height)），旧内容残留+新缩放叠加，边缘糊上加糊
额外优化建议
对清晰度有更高要求时，可补充以下操作：
- 禁用图像平滑（适用于绘制位图）：
ctx.imageSmoothingEnabled = false，避免drawImage自动插值 - 设为高质量缩放（若需保留平滑）：
ctx.imageSmoothingQuality = 'high' - 文字绘制尽量用整数坐标和字号，避开亚像素渲染；必要时关闭抗锯齿：
ctx.font = '16px sans-serif'; ctx.textRendering = 'optimizeLegibility'; - 监听
window.devicePixelRatio变化（如系统缩放切换），动态重适配（虽不常触发，但移动端可能遇到）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
