真机Canvas模糊主因是未适配pixelRatio：canvas.width/height需设为逻辑尺寸×dpr，style.width/height设为逻辑尺寸；每次绘图前须调用ctx.scale(dpr,dpr)；drawImage需先下载再绘；导出时destWidth/destHeight填物理像素并控制体积≤120KB。
真机Canvas模糊，90%是因为没处理 pixelRatio —— 你画的是逻辑像素，但 iPhone 真机（尤其是 12/13/14/15）的 pixelRatio 是 2 或 3，canvas 缓冲区物理像素不足，浏览器只能插值拉伸，结果就是文字毛边、线条发灰、二维码扫不出。
uni-app 中 canvas.width 和 style.width 必须分开设
很多人只改了 style="width: 375px; height: 667px"，却忘了 canvas.width 和 canvas.height 才决定绘图缓冲区真实分辨率。这两个属性必须设为「逻辑尺寸 × dpr」，否则画布天生缺像素。
-
canvas.width和canvas.height是 DOM 属性，单位是物理像素，影响绘图精度 -
style.width和style.height是 CSS 样式，单位是 CSS 像素，只控制显示大小 - 二者比例不等于
dpr，Canvas 就会被浏览器自动缩放，模糊不可避免 - 示例：设计稿宽 375rpx，
dpr = 3，则需canvas.width = 1125、style.width = "375px"
ctx.scale(dpr, dpr) 必须在每次绘图前调用
不是初始化时调一次就完事。每次 ctx.clearRect() 或重绘新内容前，都得重新 ctx.scale(dpr, dpr)，否则坐标系错位，文字会变细、偏移、糊成一片。
用户要生成可打印的中文字帖/练习纸、导出多页 A4 PDF 报告，或把 SVG 设计稿零误差还原到 Canvas 时使用。本技能是「Canvas 内容工厂闭环」的总控，编排：网格渲染引擎(13 种教育网格+拼音标注) → 多页 PDF 导出(A4 合成) → SVG 精准复刻(坐标误差<0.001px)。触发词：生成字帖、练习纸、导出 PDF、SVG 转 Canvas、印刷级还原、A4 报告、米字格田字格。
- 漏掉这步，哪怕缓冲区设对了，所有
fillText、lineWidth、arc都按 1:1 渲染，实际只占 1/dpr 物理像素 - 调用后，所有坐标和尺寸仍按逻辑值写（比如
fillText('Hi', 20, 30)），不用手动乘dpr - 如果用了
ctx.setTransform，注意它会覆盖scale，建议统一用scale+resetTransform控制 - 导出前也得确保 scale 已生效，否则
uni.canvasToTempFilePath拿到的是未缩放的低清缓冲区
drawImage 加远程图必须先下载再绘
直接 ctx.drawImage('https://xxx.png') 在 iOS 真机上大概率空白或糊——CORS 拦截 + WebView 自动降采样双杀。绕过浏览器加载层才是唯一可靠路径。
- 先用
uni.downloadFile下载到本地临时路径 - 再用
uni.getImageInfo获取原始宽高（含 orientation 修正） - 绘图时按逻辑尺寸计算缩放比：
drawImage(img, x, y, width * dpr, height * dpr)，或先scale再按逻辑值传参 - 若原图只有 1x 分辨率（比如后端没返回 @2x/@3x 图），放大后必然糊，前端无法补救
导出图片体积超 120KB 会被微信二次压缩
即使 Canvas 绘制完全高清，uni.canvasToTempFilePath 导出的临时路径传给 uni.share 后，微信服务端仍会强制压到 ≤120KB。这不是模糊，是马赛克级失真。
-
destWidth和destHeight必须填物理像素值（即逻辑尺寸 × dpr），否则导出尺寸不对，触发裁剪或拉伸 - 导出前主动压缩：用
quality: 0.8控制 JPEG 质量，或对大图做等比缩小（如宽 > 1200px 则缩到 1200） - 避免在 Canvas 上绘制过多阴影、渐变、透明叠加——这些都会显著增加导出体积
- 文字尽量用矢量绘制（
fillText），别转成图片；二维码用库生成后再 draw，别截图
最容易被忽略的是：canvas 元素被父容器 flex 或 absolute 布局约束时，style.width 可能被覆盖；还有 onReady 里查不到节点就硬用 this.$refs，导致整个流程在 iOS 上静默失败。务必用 uni.createSelectorQuery() 异步取 node，且确认 res[0].node 存在再操作。
