canvas移动端模糊的根本原因是物理像素与css像素不匹配，必须通过javascript动态设置canvas.width/height为css尺寸乘以devicepixelratio，并调用ctx.scale(dpr,dpr)，仅靠css设置width/height属性会导致低分辨率缓冲区被拉伸而加剧模糊。

Canvas画布在移动端模糊，单靠CSS无法真正解决——因为模糊根源是物理像素与CSS像素不匹配，而CSS只能控制显示尺寸，不能提升画布缓冲区分辨率。必须配合JavaScript重设canvas.width/canvas.height并调用ctx.scale()，CSS只起“缩回显示尺寸”的配合作用。

为什么只改CSS width/height属性会越调越糊

常见错误是直接在CSS里写canvas { width: 100%; height: 500px; }，或用JS设置canvas.style.width = "375px"，却不碰canvas.width这个DOM属性。此时画布缓冲区仍是默认的300×150（或上次遗留值），浏览器被迫把低分辨率内容拉伸填充到CSS指定大小，插值放大必然模糊。

• 现象：文字毛边、细线发灰、图标边缘有半透明过渡
• 本质：canvas.width/canvas.height决定缓冲区物理像素数，style.width/style.height仅控制CSS像素下的显示框大小
• 关键点：二者比例必须等于window.devicePixelRatio，否则必糊

CSS必须做的三件事（且仅这三件）

CSS在这里不是主角，但四个动作缺一不可：

Canvas 内容工厂（网格生成→多页 PDF→SVG 精准复刻）

用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。

下载

• 用width/height固定视觉尺寸，例如canvas { width: 100vw; height: 100vh; }，确保布局行为可控
• 加image-rendering: pixelated;（可选），对drawImage()缩放图像时禁用插值，避免二次模糊
• 禁用transform: scale()做整体缩放——它会触发浏览器插值，和DPR适配逻辑冲突
• 避免max-width或flex自动收缩导致getBoundingClientRect()读取值失真；若必须响应式，每次resize后需重新读取CSS尺寸再计算

容易被忽略的CSS陷阱：viewport与initial-scale

即使JS+CSS适配全对，页面仍模糊？大概率是meta viewport配置破坏了DPR感知：

• <meta name="viewport" content="width=device-width, initial-scale=1">是基础，但若写了maximum-scale=1或user-scalable=no，iOS Safari可能冻结DPR值，切到横屏或地址栏收起时不再更新
• 部分安卓WebView在initial-scale非1时，devicePixelRatio返回值异常（如恒为1），应优先用window.matchMedia监听(min-resolution)变化而非依赖resize
• 绝对不要用viewport强制缩放画布容器——那是在画布外层再套一层模糊

最危险的错觉是“看起来差不多清晰”，尤其在DPR=2设备上；一旦用户切到DPR=3的iPhone 15 Pro或折叠屏安卓机，未做Math.round(width * dpr)取整的画布会因小数宽高被截断1物理像素，导致右侧/底部永久丢线。DPR适配不是锦上添花，是高清屏上的生存底线。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！