HTML5 API

HTML5 API

1. Canvas绘图

Canvas API提供了一个通过JavaScript来绘制2D图形的方法。你可以把它想象成一个可以通过代码控制的数字画布。

基本用法：

<canvas id="myCanvas" width="200" height="100"></canvas>

<script>
var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d');
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 50, 50);
</script>

这段代码会在画布上绘制一个红色的正方形。你可以用Canvas绘制各种形状、线条、文字，甚至是动画。

2. 音频和视频API

HTML5内置了对音频和视频的支持，并提供了API来控制它们。这就像给你的网页添加了一个简单的多媒体播放器。

例如，你可以用JavaScript来控制视频的播放：

<video id="myVideo" src="video.mp4"></video>

<script>
var video = document.getElementById('myVideo');
video.play();  // 播放视频
video.pause(); // 暂停视频
video.currentTime = 5; // 跳转到5秒处
</script>

3. 地理定位

Geolocation API允许用户向web应用分享他们的位置。这就像给你的网页添加了一个GPS功能。

使用示例：

if ("geolocation" in navigator) {
  navigator.geolocation.getCurrentPosition(function(position) {
    console.log("纬度：" + position.coords.latitude);
    console.log("经度：" + position.coords.longitude);
  });
} else {
  console.log("浏览器不支持地理定位");
}

4. Web存储 (localStorage和sessionStorage)

Web Storage API提供了两种在客户端存储数据的方法：localStorage和sessionStorage。你可以把它们想象成网页的小型数据库。

• localStorage: 存储的数据没有过期时间，关闭页面后数据依然存在。
• sessionStorage: 数据在页面会话结束时被清除。

使用示例：

// 使用 localStorage
localStorage.setItem('username', 'John');
console.log(localStorage.getItem('username')); // 输出: John

// 使用 sessionStorage
sessionStorage.setItem('session_id', '12345');
console.log(sessionStorage.getItem('session_id')); // 输出: 12345

5. 拖放API

Drag and Drop API让你可以在网页上创建可拖动的元素。这就像给网页元素添加了"可移动"的属性。

基本用法：

<div id="draggable" draggable="true">拖我</div>
<div id="droppable">放这里</div>

<script>
document.getElementById('draggable').ondragstart = function(event) {
  event.dataTransfer.setData('text/plain', event.target.id);
};

document.getElementById('droppable').ondrop = function(event) {
  event.preventDefault();
  var data = event.dataTransfer.getData('text');
  event.target.appendChild(document.getElementById(data));
};

document.getElementById('droppable').ondragover = function(event) {
  event.preventDefault();
};
</script>

这段代码创建了一个可以拖动的元素和一个可以接收拖动元素的区域。

这些API大大增强了网页的功能，使得开发者可以创建更加丰富和交互性强的web应用。每个API都有更多的方法和属性，可以用来创建复杂的功能。