第20篇：HTML5 新 API 概览（了解篇）
·
第20篇：HTML5 新 API 概览（了解篇）
HTML5 不只是新标签，还带来了一系列浏览器端 API，让网页能做更多"应用级"的事情。本篇是概览性质的"开眼界"内容，建立技术视野，为后续深入学习做铺垫。
学习目标
- 了解 Canvas 和 SVG 的基本区别和应用场景
- 理解 Geolocation API 的用途和隐私考量
- 知道 LocalStorage / SessionStorage 的基本概念
- 了解 Web Workers 的作用和基本原理
- 建立"HTML5 = 标签 + API"的完整认知
核心知识点
一、图形绘制：Canvas vs SVG
HTML5 提供了两种在网页上绘制图形的方式：Canvas（位图）和 SVG（矢量图）。
Canvas（画布）
Canvas 是一个位图（raster）绘图区域，通过 JavaScript 逐像素绘制。
<canvas id="myCanvas" width="400" height="300">
您的浏览器不支持 Canvas。
</canvas>
<script>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
// 画一个红色矩形
ctx.fillStyle = 'red';
ctx.fillRect(50, 50, 100, 80);
// 画一段文字
ctx.fillStyle = 'black';
ctx.font = '20px Arial';
ctx.fillText('Hello Canvas!', 50, 150);
// 画一个圆
ctx.beginPath();
ctx.arc(200, 100, 40, 0, 2 * Math.PI);
ctx.fillStyle = 'blue';
ctx.fill();
</script>
| Canvas 特点 | 说明 |
|---|---|
| 类型 | 位图（像素组成） |
| 缩放 | 放大变模糊 |
| 性能 | 适合大量图形、动画、游戏 |
| 交互 | 需要自行计算碰撞检测 |
| 使用场景 | 游戏、数据可视化图表、图像处理 |
SVG（可缩放矢量图形）
SVG 使用 XML 描述图形，是矢量格式，无限缩放不失真。
<svg width="400" height="300" viewBox="0 0 400 300">
<!-- 红色矩形 -->
<rect x="50" y="50" width="100" height="80" fill="red" />
<!-- 文字 -->
<text x="50" y="150" font-size="20" fill="black">Hello SVG!</text>
<!-- 圆形 -->
<circle cx="200" cy="100" r="40" fill="blue" />
<!-- 线条 -->
<line x1="50" y1="200" x2="350" y2="200" stroke="green" stroke-width="3" />
</svg>
| SVG 特点 | 说明 |
|---|---|
| 类型 | 矢量（数学公式描述） |
| 缩放 | 无限缩放清晰 |
| 性能 | 适合图标、Logo、简单图形 |
| 交互 | 每个元素都是 DOM，可直接绑定事件 |
| 使用场景 | 图标系统、Logo、图表、响应式图形 |
Canvas vs SVG 选择
需要图形？
├── 需要无限缩放清晰？
│ └── → SVG（图标、Logo、图表）
│
├── 需要大量动画/游戏？
│ └── → Canvas（游戏、粒子效果）
│
├── 需要像素级图像处理？
│ └── → Canvas（滤镜、图像编辑）
│
└── 需要复杂交互的事件系统？
└── → SVG（数据可视化、交互式图表）
二、地理位置：Geolocation API
允许网页获取用户的地理位置（经纬度）。
// 获取当前位置
navigator.geolocation.getCurrentPosition(
(position) => {
console.log('纬度：', position.coords.latitude);
console.log('经度：', position.coords.longitude);
console.log('精度：', position.coords.accuracy, '米');
},
(error) => {
console.error('获取位置失败：', error.message);
},
{
enableHighAccuracy: true, // 高精度
timeout: 5000, // 超时时间
maximumAge: 0 // 不使用缓存
}
);
隐私与安全
| 要点 | 说明 |
|---|---|
| 用户授权 | 浏览器会弹出权限请求，用户必须同意 |
| HTTPS 要求 | 现代浏览器要求 Geolocation 只能在 HTTPS 页面使用 |
| 精度控制 | enableHighAccuracy: false 可降低精度保护隐私 |
| 使用场景 | 地图导航、附近商家推荐、天气定位 |
// 持续监听位置变化
const watchId = navigator.geolocation.watchPosition((position) => {
console.log('位置更新：', position.coords);
});
// 停止监听
navigator.geolocation.clearWatch(watchId);
三、本地存储：LocalStorage 与 SessionStorage
浏览器提供的键值对存储，让网页可以在本地保存数据。
LocalStorage
数据持久保存，除非用户手动清除，否则一直存在。
// 保存数据
localStorage.setItem('username', '张三');
localStorage.setItem('theme', 'dark');
// 读取数据
const username = localStorage.getItem('username');
console.log(username); // "张三"
// 删除数据
localStorage.removeItem('theme');
// 清空所有
localStorage.clear();
SessionStorage
数据只在当前会话（标签页）有效，关闭标签页后自动清除。
// 用法和 localStorage 完全相同
sessionStorage.setItem('tempData', '一些临时数据');
const data = sessionStorage.getItem('tempData');
两者对比
| LocalStorage | SessionStorage | |
|---|---|---|
| 生命周期 | 永久（除非清除） | 标签页关闭即清除 |
| 作用域 | 同源所有标签页共享 | 仅当前标签页 |
| 容量 | 约 5-10 MB | 约 5-10 MB |
| 使用场景 | 用户偏好、登录状态 | 表单草稿、临时数据 |
⚠️ 重要限制：
- 只能存储字符串，对象需要
JSON.stringify()/JSON.parse()- 不要在 LocalStorage 中存储敏感信息（如密码、token），因为数据以明文保存在本地
四、后台线程：Web Workers
Web Workers 允许 JavaScript 在后台线程中执行代码，不阻塞主线程的 UI 渲染。
// main.js（主线程）
// 创建 Worker
const worker = new Worker('worker.js');
// 向 Worker 发送数据
worker.postMessage({ numbers: [1, 2, 3, 4, 5] });
// 接收 Worker 的结果
worker.onmessage = (event) => {
console.log('计算结果：', event.data);
};
// worker.js（后台线程）
self.onmessage = (event) => {
const numbers = event.data.numbers;
// 执行耗时计算（不会阻塞主线程）
const sum = numbers.reduce((a, b) => a + b, 0);
// 把结果发回主线程
self.postMessage(sum);
};
Web Workers 的特点
| 特点 | 说明 |
|---|---|
| 隔离环境 | Worker 无法访问 DOM、window、document |
| 通信方式 | 通过 postMessage 和 onmessage 传递数据 |
| 适用场景 | 大数据处理、复杂计算、文件解析、加密运算 |
| 文件限制 | Worker 代码必须在独立的 .js 文件中 |
使用场景
- 图片压缩/处理
- CSV/JSON 大数据解析
- 复杂数学计算
- 实时数据加密
五、其他 HTML5 API 速览
| API | 用途 | 状态 |
|---|---|---|
| File API | 在浏览器中读取本地文件内容 | ✅ 广泛支持 |
| Drag and Drop | 实现拖拽上传 | ✅ 广泛支持 |
| WebSocket | 浏览器与服务器的实时双向通信 | ✅ 广泛支持 |
| Notification API | 桌面通知推送 | ✅ 需用户授权 |
| Fullscreen API | 网页全屏显示 | ✅ 需用户交互触发 |
| Clipboard API | 读写剪贴板 | ✅ 需用户授权 |
| Page Visibility | 检测页面是否可见（切换标签页） | ✅ 广泛支持 |
| Battery Status | 获取设备电量信息 | ⚠️ 隐私考虑，部分浏览器限制 |
| Vibration API | 控制设备震动（移动端） | ✅ 移动端支持 |
| Device Orientation | 获取设备方向/加速度 | ✅ 移动端支持 |
六、完整认知：HTML5 = 新标签 + 新 API
HTML5 不仅仅是一套新标签，而是一个完整的平台：
┌────────────────────────────────────────────────────┐
│ HTML5 平台 │
├────────────────────┬───────────────────────────────┤
│ 语义化标签 │ 浏览器 API │
├────────────────────┼───────────────────────────────┤
│ • header/nav/main │ • Canvas/SVG 绘图 │
│ • article/section │ • Geolocation 定位 │
│ • aside/footer │ • LocalStorage 本地存储 │
│ • time/mark │ • Web Workers 后台线程 │
│ • figure/details │ • WebSocket 实时通信 │
│ • ... │ • File API 文件操作 │
│ │ • ... │
├────────────────────┴───────────────────────────────┤
│ CSS3 样式 │ JavaScript ES6+ │
│ • Flexbox/Grid │ • 箭头函数、Promise │
│ • 动画/过渡 │ • async/await │
│ • 响应式媒体查询 │ • 模块化 import/export │
│ • 自定义属性 │ • ... │
└────────────────────────────────────────────────────┘
动手练习
练习 1：Canvas 初体验
在页面中创建一个 Canvas，用 JavaScript 绘制：
- 一个填充的矩形
- 一个描边的圆形
- 一段文字
- 一条直线
练习 2：SVG 图标
创建一个简单的 SVG 图标（如心形、星星或箭头）：
- 使用
<svg>标签直接写在 HTML 中 - 尝试放大和缩小页面，观察 SVG 是否保持清晰
- 对比同样大小的 PNG 图片在放大时的效果
练习 3：LocalStorage 实验
创建一个简单的"主题切换器"：
- 页面有两个按钮：“深色模式"和"浅色模式”
- 点击按钮改变页面背景色
- 用
localStorage保存用户的主题选择 - 刷新页面后，自动恢复上次选择的主题
常见误区 ⚠️
| 误区 | 真相 |
|---|---|
| “Canvas 和 SVG 是一回事” | 完全不同！Canvas 是位图（像素），SVG 是矢量（数学描述） |
| “Geolocation 不需要用户同意” | ❌ 浏览器会弹出权限请求，用户必须授权 |
| “LocalStorage 可以存大量数据” | 一般只有 5-10MB，且只能存字符串 |
| “LocalStorage 是安全的存储” | ❌ 数据明文保存在本地，不要存敏感信息 |
| “Web Workers 可以操作 DOM” | ❌ Worker 完全隔离，不能访问 DOM |
| “这些 API 所有浏览器都支持” | 大多数现代浏览器支持，但 IE 不支持，旧版 Safari 部分支持 |
| “HTML5 就是新标签” | HTML5 是一个平台，包含新标签 + 新 API + CSS3 |
| “学了这些 API 就能做 App” | 还需要配合 JavaScript、框架、后端等才能做完整应用 |
速查卡片 📋
Canvas vs SVG
| Canvas | SVG | |
|---|---|---|
| 类型 | 位图 | 矢量 |
| 缩放 | 放大变模糊 | 无限清晰 |
| 元素 | 没有 DOM 元素 | 每个图形都是 DOM |
| 事件 | 需自行计算 | 可直接绑定 |
| 适合 | 游戏、动画、图像处理 | 图标、Logo、图表 |
存储对比
| LocalStorage | SessionStorage | Cookie | |
|---|---|---|---|
| 容量 | ~5-10 MB | ~5-10 MB | ~4 KB |
| 生命周期 | 永久 | 标签页关闭 | 可设置过期时间 |
| 服务端读取 | ❌ 否 | ❌ 否 | ✅ 是 |
| 适合 | 用户偏好 | 临时数据 | 登录凭证 |
HTML5 API 一览
图形： Canvas（位图）| SVG（矢量）
定位： Geolocation
存储： LocalStorage | SessionStorage
线程： Web Workers
通信： WebSocket
文件： File API
通知： Notification API
全屏： Fullscreen API
学习路径建议
本篇只是"开眼界"的概览，后续深入学习：
Canvas 深度 → 学习 Canvas 2D/3D API、动画、游戏开发
SVG 深度 → 学习 SVG 路径、滤镜、动画、D3.js
存储深度 → 学习 IndexedDB、Cache API
实时通信 → 学习 WebSocket、WebRTC
性能优化 → 学习 Service Workers、PWA
扩展阅读
- MDN: Canvas API
- MDN: SVG 教程
- MDN: Geolocation API
- MDN: Web Storage API
- MDN: Web Workers API
- HTML5 Rocks（英文，全面介绍 HTML5 API）
📌 下一步：HTML5 新特性阶段结束！接下来进入 第21篇：语义化 HTML 编写原则，建立编写高质量 HTML 的系统思维。
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念，把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起，为开发者提供从开发、训练到部署的一站式体验。
更多推荐
5
0- 0
已为社区贡献15条内容
所有评论(0)