HTML5核心功能解析：Canvas、视频与音频详解

小伙伴们对文章编程感兴趣吗？是否正在学习相关知识点？如果是，那么本文《HTML5新特性盘点：Canvas、视频与音频核心功能解析》，就很适合你，本篇文章讲解的知识点主要包括。在之后的文章中也会多多分享相关知识点，希望对大家的知识积累有所帮助！

HTML5是面向现代Web应用的底层能力升级，核心在于canvas像素控制、video/audio跨浏览器限制、localStorage同步阻塞风险及语义化标签的无障碍价值。

HTML5 不是“一个新标签”，而是整套面向现代 Web 应用的底层能力升级。真正影响开发决策的，是那些你每天会调用、会踩坑、会查兼容性的具体特性。

的核心用途不是画图，而是像素级控制

很多人把 当成 SVG 替代品，这是误解起点。它本质是一块位图缓冲区，getContext('2d') 返回的不是绘图工具，而是像素操作接口。

• 动画帧必须手动清屏（clearRect()），否则上一帧残留
• 没有 DOM 树、不响应事件，要实现点击识别得自己算坐标 + isPointInPath()
• 高 DPI 屏幕下需手动缩放 canvas.width/canvas.height，否则模糊（devicePixelRatio 必须参与计算）
• WebGL（getContext('webgl')）才是性能关键路径，2D 上做复杂动效不如 CSS 或 SVG

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 高 DPI 适配示例
const dpr = window.devicePixelRatio || 1;
canvas.width = canvas.clientWidth * dpr;
canvas.height = canvas.clientHeight * dpr;
ctx.scale(dpr, dpr);

和 的真实限制比文档写得更硬

原生媒体标签极大简化了播放逻辑，但格式支持、行为差异和权限策略远比想象中复杂。

• Chrome 对 autoplay 有严格静音策略：未用户交互前，带声音的视频默认被阻止（muted 属性可绕过）
• Safari 在 iOS 上禁止 JS 调用 play()，必须由用户手势触发（click、touchstart）
• H.264 是最安全的视频编码，但 Firefox 默认不支持；MP4 容器 ≠ H.264 编码，导出时需确认编码器
• canplaythrough 事件不可靠，建议监听 loadeddata + readyState === 4 组合判断

localStorage 和 sessionStorage 的容量与阻塞风险常被低估

它们不是“前端数据库”，而是同步、阻塞式、无事务的键值字符串存储。

• 实际可用容量约 5–10MB（各浏览器不同），超出会抛 QuotaExceededError
• 所有读写都在主线程执行，存取大对象（如 JSON 字符串 >1MB）会导致明显卡顿
• 数据是纯字符串，存对象必须 JSON.stringify()，取回必须 JSON.parse()，失败直接报错中断流程
• 同源策略严格：子域名间不共享，http 与 https 视为不同源

try {
  localStorage.setItem('user', JSON.stringify({ id: 123, name: 'Alice' }));
} catch (e) {
  if (e.name === 'QuotaExceededError') {
    console.error('本地存储已满');
  }
}

语义化标签不是为了 SEO，而是为了无障碍与可维护性