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