使用 Canvas 首先要在页面中创建<canvas>标签，指定宽高，再通过 JS 获取 2D 绘图上下文。基础绘制很简单：用 fillRect 画矩形、arc 画圆形、路径工具画线条和多边形，还能添加文字、颜色填充。实现实时数据可视化的核心是动态重绘，结合定时器、WebSocket 或接口请求获取最新数据，每次更新前先用 clearRect 清空画布，再根据新数据重新绘制折线图、柱状图、雷达图等图表。这种方式轻量高效，能适配监控面板、实时报表、数据大屏等场景，每秒多次重绘也能保持流畅，是前端实时数据展示的首选方案。
Canvas 是位图绘图，基于像素，通过 JS 逐帧绘制；SVG 是矢量图形，由 DOM 节点组成，可直接操作元素。Canvas 优点是渲染性能强，适合大数据量、动态画面；缺点是不支持事件绑定，缩放会模糊。SVG 优点是矢量无限缩放不失真，支持 DOM 操作和事件交互，文件体积小；缺点是大量元素时渲染卡顿。使用场景很好区分：Canvas 适合游戏、实时数据可视化、高清动画；SVG 适合页面图标、静态图表、需要交互的简单图形，两者互补，覆盖了前端绝大多数绘图需求。
HTML5 推出了<audio>和<video>原生多媒体标签，彻底替代了 Flash，这是最大的革新。新特性非常丰富：原生支持播放控制、全屏、倍速播放、字幕轨道、音量调节，还能对接流媒体，支持 H.264、MP3、WebM 等主流格式，提供完整的 JS API 控制播放、暂停、进度。嵌入方式变得极简，不用安装第三方插件，只需一行标签即可引入音视频，适配移动端和桌面端，跨平台兼容性拉满。标签自带默认控制器，也能自定义 UI，让音视频嵌入从复杂的插件方案，变成了轻量化、标准化的原生实现。
HTML5 依靠时间监听和精准控制实现多媒体同步，核心是监听timeupdate事件，实时获取音视频的播放进度。同步时将多个媒体的currentTime属性对齐，统一触发play()和pause()方法，保证进度一致。针对缓冲延迟，监听waiting和playing事件，等所有媒体缓冲完成后再同步启动，避免卡顿。结合requestAnimationFrame可以实现媒体与动画、字幕的精准同步，Web Audio API 还能提供微秒级的音频同步精度。这套方案广泛用于音画同步、课件教学、广告联动等场景，保证播放无偏差。
WebGL 是运行在 Canvas 上的3D 图形绘图标准，基于 OpenGL ES，直接调用 GPU 硬件加速，专门用来在网页中渲染高性能的 2D/3D 图形。它的核心用途是实现网页端复杂的视觉效果：比如 3D 网页游戏、工业三维建模、大数据 3D 可视化、VR/AR 交互场景、建筑仿真等。无需安装插件，纯网页就能运行，配合 Three.js 等框架，能大幅降低开发难度。WebGL 弥补了 Canvas 2D 的性能短板，让网页实现媲美客户端的 3D 渲染效果，是前端高端视觉交互的核心技术。
HTML5 实现复杂动画有多种方案，可组合使用。基础动画用 CSS3 的transition和animation，适合简单的位移、渐变；复杂动态画面用Canvas 逐帧重绘，配合requestAnimationFrame保证流畅度，适合游戏、数据动画；3D 复杂动画直接用 WebGL，依托 GPU 加速。矢量动画用 SVG 的 SMIL 或 JS 控制节点。还能借助 GSAP、Anime.js 等专业动画库，快速实现序列动画、缓动效果、物理运动、交互动画。多种技术搭配，既能实现网页交互动效、UI 动画，也能做大型游戏、可视化动画，满足所有复杂动画需求。
