Canvas 画布尺寸为0导致二维码不显示的最常见原因是未设置显式width/height属性或被CSS隐藏；需检查canvas是否有width/height属性、避免display:none父容器初始化、确保正确调用makeCode而非仅clear、处理跨域资源污染、确认DOM插入时机及框架生命周期。
Canvas 画布尺寸为 0 导致二维码不显示
最常见原因：用 qrcode.js 或类似库在 <canvas></canvas> 上生成二维码时，canvas 元素没设宽高，或被 CSS 设为 display: none / visibility: hidden，导致渲染区域实际为 0×0。
- 检查
canvas是否有显式width和height属性（不是仅靠 CSS）；<canvas width="200" height="200"></canvas>才有效 - 避免在
display: none的父容器里初始化二维码——哪怕之后 show 了，canvas 缓冲区可能仍为空 - 若用 CSS 控制尺寸，必须同时设置
canvas.width和canvas.height属性（JS 赋值），不能只靠style.width
qrcode.js 的 render 方法未正确调用或参数错
qrcode.js（尤其是老版本）默认用 render 方法画到 canvas，但容易漏掉必要参数或误用 makeCode。
- 确认调用的是
qrCode.makeCode("https://example.com")（生成并绘制），而不是只调qrCode.clear()或漏掉字符串参数 - 如果手动调
qrCode.render()，它不会自动重绘——必须先qrCode.clear()+qrCode.makeCode(...) - 新版
qrcode-generator不支持直接 render 到 canvas，得用toDataURL()再塞进<img alt="html如何生成二维码图片不显示不出来" >
跨域图片/字体导致 canvas 被污染无法导出
有些二维码库会动态加载图标、背景图或自定义字体，一旦这些资源跨域且没配 CORS，canvas 就会被标记为“tainted”，后续 toDataURL() 报错或返回空字符串，<img src="data:..." alt="html如何生成二维码图片不显示不出来" > 自然空白。
- 用浏览器 DevTools 的 Network 面板过滤
img或font，看是否有 403/0 状态的请求 - 临时把图标转成 base64 内联，或确保 CDN 返回
Access-Control-Allow-Origin: * - 测试时可先禁用所有自定义 logo、背景，纯文本生成，确认基础流程是否通
生成后没插入 DOM 或时机不对
代码跑完了，但 <canvas></canvas> 还没 append 到页面，或者 JS 在 DOM 加载前就执行了。
立即学习“前端免费学习笔记（深入）”；
- 确保
document.getElementById("qrcode-canvas")能取到元素——放在底部，或包在DOMContentLoaded里 - 如果用
toDataURL()创建<img alt="html如何生成二维码图片不显示不出来" >，记得img.src = dataUrl后再appendChild，否则可能加载失败静默丢弃 - Vue/React 等框架中，别在组件未挂载时调用生成逻辑；React 用
useEffect(() => { ... }, [])，Vue 用onMounted
真正卡住的往往不是算法，而是 canvas 的隐式状态——宽高、污染、生命周期，三者任一出问题，画面就彻底消失，连报错都不会有。
