HTML二维码本质是静态图片或Canvas/SVG图形，无法自动响应数据变化；动态生成需用JavaScript库（如qrcode.js）在DOM就绪后调用toCanvas()等方法实时绘制，并注意元素复用、尺寸设置与生命周期管理。
HTML二维码是静态的，不能直接“动态生成”
所谓“HTML二维码”，本质是把一个预生成的二维码图片（img 标签）嵌入页面，或者用 Canvas/SVG 绘制出二维码图形。它本身不带逻辑，也不响应数据变化——src 指向哪张图，就显示哪张图；Canvas 画完就定型了。你没法对一个 <img src="qrcode.png"> 调用“刷新内容”方法。
真正能动态生成的，是 JavaScript 生成的二维码
实际项目中说的“动态二维码”，几乎都指：用户输入文本、点击按钮、URL 变化后，前端 JS 实时调用库（如 qrcode.js 或 @chenfengyuan/qrcode）生成新码。关键点在于：
-
qrcode.js的QRCode.toCanvas()/QRCode.toDataURL()必须在 DOM 元素存在后再调用，否则报错Cannot read property 'getContext' of null - 若用
innerHTML替换整个div，旧 Canvas 会被销毁，但绑定的事件或定时器不会自动清理，可能引发内存泄漏 - 频繁调用
toCanvas()且未复用 Canvas 元素时，浏览器会不断创建新绘图上下文，影响性能（尤其低端安卓 WebView） - 注意
QRCode.toString()返回的是字符串数组（每行一行），不是可直接插入 HTML 的结构，别误当 HTML 片段用
服务端生成 vs 前端生成：选哪个看场景
很多人纠结“该让后端吐二维码还是前端自己画”，其实取决于三个硬约束：
- 内容是否含敏感信息？比如动态 token、临时凭证——这类必须由后端生成并签名，前端只负责展示
<img src="/api/qrcode?data=xxx">，避免泄露生成逻辑 - 是否需要离线可用？PWA 或扫码登记终端类应用，必须前端生成，否则没网就崩
- 二维码内容是否超长？
qrcode.js对 >2KB 的 UTF-8 文本默认用 Byte 模式，但部分扫码器兼容差；此时后端用python-qrcode可精细控制 error correction level 和 mode，更稳
常见踩坑：DOM 更新后二维码不刷新
最典型的现象：Vue/React 中绑定了二维码内容变量，但 UI 更新了，Canvas 还是旧码。根本原因不是框架问题，而是开发者忘了触发重绘：
立即学习“前端免费学习笔记（深入）”；
- 没监听数据变化，或监听了但没调用
QRCode.clear()+QRCode.makeCode()（老版本 API） - 用了
document.getElementById('qrcode').innerHTML = ''清空，但新 Canvas 插入时未指定width/height属性，导致渲染模糊或比例失真 - 在
setTimeout里生成二维码，却没等父容器offsetWidth > 0——比如容器初始display: none，Canvas 画布尺寸为 0×0，结果啥也看不见
动态生成不是加个“实时”标签就完事，核心是控制好生成时机、元素生命周期和尺寸上下文。Canvas 一旦画完，就不会自己盯着数据变；想让它动，就得人来管住它什么时候清、什么时候画、画多大。
