HTML5原生功能需通过JavaScript调用对应API：Canvas用于绘图，Geolocation获取位置，MediaDevices访问媒体设备，localStorage持久化存储，History API控制浏览器历史。
如果您在前端开发中需要使用HTML5提供的原生功能，例如绘制图形或获取用户地理位置，则必须通过JavaScript调用对应的HTML5 API。以下是具体调用方式：
一、调用Canvas API绘制图形
Canvas API提供了一个可通过JavaScript脚本控制的位图画布，用于动态渲染2D图形。调用前需确保页面中存在<canvas>元素，并通过getContext('2d')获取绘图上下文。
1、在HTML中添加<canvas id="myCanvas" width="400" height="300"></canvas>标签。
2、使用document.getElementById('myCanvas')获取该元素对象。
立即学习“前端免费学习笔记（深入）”；
3、调用getContext('2d')方法获取2D渲染上下文对象。
4、使用上下文对象的fillRect()、strokeText()等方法执行绘制操作。
5、确保脚本在DOM加载完成后执行，可将代码包裹在DOMContentLoaded事件监听器中或置于</body>前。
二、调用Geolocation API获取用户位置
Geolocation API允许网页在用户明确授权后获取其设备的地理坐标。该API通过navigator.geolocation对象暴露，所有操作均为异步。
1、检查浏览器是否支持该API：if ('geolocation' in navigator)。
2、调用navigator.geolocation.getCurrentPosition()请求当前位置。
3、传入成功回调函数，接收包含latitude和longitude属性的coords对象。
4、传入错误回调函数，处理如用户拒绝授权、定位超时或不可用等情形。
5、可选地传入配置对象，例如设置enableHighAccuracy: true或timeout: 5000。
三、调用MediaDevices API访问摄像头或麦克风
MediaDevices API用于访问用户媒体输入设备，如摄像头和麦克风，常用于实时音视频采集。调用需用户主动授权，且仅在安全上下文（HTTPS或localhost）中可用。
1、确认navigator.mediaDevices对象存在且getUserMedia方法可用。
2、构造约束对象，例如{ video: true, audio: true }或仅启用视频。
3、调用navigator.mediaDevices.getUserMedia(constraints)并返回Promise。
4、在Promise的then回调中获取MediaStream对象。
5、将流赋值给<video>元素的srcObject属性以实现预览。
四、调用localStorage API持久化保存数据
localStorage提供同步的键值对存储机制，数据在页面关闭后仍保留在浏览器中，适用于非敏感的轻量级客户端状态管理。
1、使用localStorage.setItem(key, value)写入字符串数据。
2、使用localStorage.getItem(key)读取对应键的值。
3、使用localStorage.removeItem(key)删除指定键值对。
4、使用localStorage.clear()清空全部存储项。
5、注意：所有值均自动转换为字符串，如需存对象，须先用JSON.stringify()序列化，读取时用JSON.parse()解析。
五、调用History API修改浏览器地址栏而不刷新页面
History API允许在不重新加载页面的前提下操作浏览器会话历史记录，常用于单页应用（SPA）的路由控制。
1、使用history.pushState(state, title, url)向历史栈添加新条目。
2、使用history.replaceState(state, title, url)替换当前历史条目。
3、监听popstate事件，在用户点击前进/后退按钮时响应状态变更。
4、state参数可为任意可序列化对象，将在popstate事件的event.state中还原。
5、注意：title参数目前在大多数浏览器中被忽略，建议传入空字符串。
