Canvas 的备用文本必须写在 <canvas> 开始与结束标签之间，仅在浏览器不支持 Canvas 或脚本被禁用时显示，且需为语义化、功能等价的合法 HTML 内容。
Canvas 的备用文本（fallback content）不是靠属性或 JS 注入实现的，而是直接写在 <canvas> 标签内部——它只在 Canvas 不可用时才渲染，且必须是合法 HTML 内容。
备用文本必须写在 <canvas> 开始与结束标签之间
Canvas 元素的容错机制依赖的是其“透明内容模型”：浏览器若不支持 Canvas、禁用脚本、或绘图上下文获取失败，就会忽略所有 JS 绘制逻辑，直接显示标签内的子内容。
- ✅ 正确写法：
<canvas id="chart"><p>图表不可用，请升级浏览器</p></canvas> - ❌ 错误写法：
<canvas id="chart" alt="图表不可用"></canvas>（alt是<img>属性，Canvas 不识别） - ❌ 错误写法：
<canvas id="chart"></canvas><p>备用文字</p>（外部<p>永远不会被当作 fallback，除非显式包裹在<canvas>内）
备用内容需满足可访问性与语义合理性
它不只是“提示文字”，而是功能等价的替代呈现——尤其对屏幕阅读器、无 JS 环境或打印场景有效。
- 避免纯装饰性文字，如“此处应有动画”；应说明实际意图，例如“2026年Q2销售趋势图：同比增长12%”
- 可嵌套语义化 HTML：
<table>表格数据、<ul>列表、甚至<img src="chart.png" alt="柱状图：A/B/C 三组销量对比"> - 若原 Canvas 动态生成图表，备用内容建议提供静态数据快照（而非空 div 或 loading 文字）
JS 绘图失败时，备用内容不会自动“切换回来”
Canvas 渲染失败（如 getContext('2d') 返回 null、width/height 为 0、选择器错误）并不会触发备用内容显示——它只响应浏览器原生不支持或脚本被全局禁用。
立即学习“前端免费学习笔记（深入）”；
- 这意味着：你仍需主动检测上下文是否有效，否则用户看到的是空白画布，而非备用文字
- 推荐加一层防御性判断：
const canvas = document.querySelector('#myCanvas');<br>if (!canvas || !canvas.getContext) {<br> // 可选：手动显示备用区域（如 showFallback()）<br> console.error('Canvas not available');<br> return;<br>}<br>const ctx = canvas.getContext('2d');<br>if (!ctx) {<br> console.error('2D context not supported');<br> return;<br>} - 注意：CSS 隐藏
<canvas>（如display: none）会导致备用内容也不显示——它依赖元素在 DOM 中正常参与渲染流
最容易被忽略的是：备用文本的存在本身不解决 JS 运行时错误；它只兜底环境级失效。真正健壮的代码，得同时保证 Canvas 元素存在、上下文可用、字体加载完成、坐标计算合理——四者缺一，文字就静默消失，而 fallback 依然安静躺在那里，纹丝不动。
