Canvas元素是空白位图绘图表面，需用JavaScript获取上下文绘制；回退文本必须置于标签内，用于无障碍访问和脚本禁用场景。
Canvas 元素本身不渲染内容，它只是一个位图绘图表面，必须通过 JavaScript 获取上下文并绘制；回退文本应放在 <canvas> 开始与结束标签之间，仅当浏览器不支持 Canvas 或脚本被禁用时才显示。
Canvas 容器的基本定义
Canvas 是 HTML5 提供的原生位图绘图 API 容器，本质是一个空白的矩形区域，不具备默认视觉内容。它需要明确指定宽高（推荐用 HTML 属性 width 和 height，而非 CSS），否则会使用默认尺寸（300×150 像素）并可能因 CSS 缩放导致绘制失真。
- 正确写法：
<canvas id="myCanvas" width="600" height="400"></canvas> - 避免仅用 CSS 设置尺寸，例如
style="width:600px; height:400px;"，这会拉伸画布像素，造成模糊或变形 - 必须配合 JavaScript 使用：
const ctx = document.getElementById('myCanvas').getContext('2d');才能开始绘图
回退文本的编写要求
回退文本不是可选提示，而是面向无障碍访问和降级场景的关键内容。它应简洁说明 Canvas 的用途或提供替代信息（如静态图描述、数据摘要、链接到替代页面等），不可为空或仅写“您的浏览器不支持 canvas”。
- 必须位于
<canvas>...</canvas>标签内部，作为其子内容 - 可包含普通文本、
<p>、<img>、<a>等合法 HTML 内联或块级元素 - 示例：
<canvas id="chart" width="500" height="300">
此处显示销售趋势图。如需查看详细数据，请下载完整报表。
</canvas>
辅助技术与脚本禁用场景的适配
屏幕阅读器在遇到 <canvas> 时默认跳过其内容，除非添加 role="img" 和 aria-label 或 aria-labelledby。同时，若用户禁用 JavaScript，回退文本是唯一可见内容，因此需确保其独立可用。
立即学习“前端免费学习笔记（深入）”；
- 增强可访问性：添加
role="img" aria-label="2023年季度销售额折线图" - 避免依赖 JS 渲染回退内容（如用 JS 动态插入文本），否则脚本禁用时将无内容显示
- 不建议在回退区放置复杂交互组件（如表单），因其无法被 Canvas API 激活，且与降级目标不符
