动态生成HTML二维码需适配设备像素比、节流重绘、避免样式干扰：canvas须按dpr缩放并CSS还原尺寸；toCanvas()需节流复用节点；禁用裁剪/透明/变形样式；真机测试且调用clear()防残留。
动态生成 HTML 二维码本身不难，但直接用 qrcode.js 或 QRCode.toString() 输出到页面，常导致模糊、缩放失真、响应慢或移动端扫码失败——根本原因不是库不行，而是没控制好渲染上下文和 DOM 更新节奏。
为什么 canvas 渲染的二维码在高清屏上发虚？
默认 canvas 绘制未适配设备像素比（window.devicePixelRatio），导致物理像素不足，浏览器用插值拉伸，边缘糊成一片。
- 必须手动设置
canvas.width和canvas.height为逻辑尺寸 ×window.devicePixelRatio - 同时用 CSS 将 canvas 显示尺寸设回逻辑尺寸（例如
style="width: 200px; height: 200px;"） - 调用
ctx.scale(dpr, dpr)再绘制，否则内容会变小 - 若用
qrcode-generator等纯 SVG 方案，可绕过此问题，但 SVG 在某些老安卓 WebView 中不支持foreignObject，导致中文乱码
QRCode.toCanvas() 更新频繁时卡顿甚至崩溃？
每调用一次 toCanvas() 都会清空并重绘整个 canvas，高频触发（如输入框实时生成）会导致重排重绘压力过大，尤其在低端 Android 设备上易卡死。
- 加节流：用
setTimeout+ 标志位，确保两次调用间隔 ≥ 16ms（≈60fps） - 复用 canvas 元素：不要每次
document.createElement('canvas')，缓存并复用 DOM 节点 - 避免在
input事件中直接调用生成函数，改用debounce或监听change+blur - 若内容只是 URL 变化，且结构固定，可考虑预生成几套常见尺寸的 canvas，切换 display 属性而非重绘
扫码失败？检查这三项 DOM 层级与样式干扰
二维码本身生成正确，但被父容器裁剪、透明度覆盖、或 CSS transform 导致形变，手机摄像头就无法识别。
立即学习“前端免费学习笔记（深入）”；
- 确保二维码容器没有
overflow: hidden或clip-path，哪怕只裁掉 1px 边框也会失败 - 禁用
opacity、filter: blur()、transform: scale(0.99)等任何影响像素精度的样式 - 测试时用真机打开，而不是 DevTools 的“设备模拟”——后者不模拟摄像头对对比度、反光、焦距的敏感性
最常被忽略的是：动态生成后未触发 QRCode.clear()（如果库支持），旧 canvas 数据残留可能污染后续渲染；还有就是把二维码塞进 contenteditable 区域，导致 iOS Safari 自动聚焦并弹出键盘，遮挡扫码视图。
