本文来自：http://www.myext.cn/webkf/18457.html
1.Canvas
顾名思义，画布，你在上面画画
<!DOCTYPE html>
<html>
<canvas id="canvas" style="border: 1px solid;" width="250" height="250"> </canvas>
<script>
function drawTriangle(context){//画三角形
context.beginPath();
context.moveTo(0, 0);
context.lineTo(30, -30);
context.lineTo(60, 0);
context.lineTo(0, 0);
context.fillStyle = '#339900';
context.fill();
context.closePath();
}
function draw() {
var canvas = document.getElementById('canvas');//获取画布
var context = canvas.getContext('2d');//获取画笔
context.save();
context.translate(30, 60);//移动基准位置
drawTriangle(context);//画第一个三角形
context.stroke();
context.translate(60, 90);//移动基准位置
drawTriangle(context);//画第二个三角形
context.stroke();
context.restore();
}
window.addEventListener("load", draw, true);
</script>
</html>
在浏览器里的样子
2.Audio/Video
无需插件，播放音频，视频，每个浏览器能支持的格式不一样，自己掂量吧
!DOCTYPE html>
<html>
<audio controls>
<source src="johann_sebastian_bach_air.ogg">
<source src="johann_sebastian_bach_air.mp3">
An audio clip from Johann Sebastian Bach.
</audio>
</html>
Chrome中Audio的样子
如何在JS中控制Audio的播放
<!DOCTYPE html>
<html>
<audio id="clickSound">
<source src="johann_sebastian_bach_air.ogg">
<source src="johann_sebastian_bach_air.mp3">
</audio>
<button id="toggle" onclick="toggleSound()">Play</button>
<script type="text/javascript">
function toggleSound() {
var music = document.getElementById("clickSound");
var toggle = document.getElementById("toggle");
if (music.paused) {
music.play();
toggle.innerHTML = "Pause";
}
else {
music.pause();
toggle.innerHTML ="Play";
}
}
</script>
</html>
Video播放和控制
<!DOCTYPE html>
<html>
<video id="movies" controls onmouseover="this.play()" onmouseout="this.pause()" autobuffer="true"
width="400px" height="300px">
<source src="Intermission-Walk-in.ogv" type='video/ogg; codecs="theora, vorbis"'>
<source src="Intermission-Walk-in_512kb.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
</video>
</html>
Chrome中Video的样子
3.Geolocation
获取用户地理位置，用户可以选择是否愿意，目前来说相当的不靠谱，fanqiang后可以在Firefox测试成功，因为Firefox使用的Google的地理服务，看看代码，也比较简单
<script type="text/javascript">
function loadDemo() {
if(navigator.geolocation) {//检测浏览器是否支持Geolocation
navigator.geolocation.getCurrentPosition(updateLocation);
}
}
function updateLocation(position) {
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
if (!latitude || !longitude) {
return;
}
document.getElementById("latitude").innerHTML = latitude;
document.getElementById("longitude").innerHTML = longitude;
}
</script>
分享到：
相关推荐
html5入门代码大全(源码) 包含audio、video、canvas 、communication、forms、geolocation、intro、offline、storage、websocket、workers
而HTML5作为最新的Web标准，引入了许多新的API，如Canvas、Audio/Video、Geolocation等，极大地增强了Web应用的功能和用户体验。本文将深入探讨这两者的结合使用，以提升Web开发的效率和质量。 首先，我们来谈谈...
HTML5 API是HTML5规范的一部分，这些API包括了Canvas画布、WebSocket实时通信、Geolocation定位、Audio/Video多媒体处理、离线存储Web Storage（包括SessionStorage和LocalStorage）、Drag and Drop拖放功能、Web ...
这款"html5参考手册 api.zip_Html5API"压缩包提供了一份详尽的HTML5 API开发手册，即使在没有互联网连接的情况下也能供开发者参考使用。这份手册以.chm（ Compiled HTML Help）格式存储，是一种由微软开发的帮助文件...
3. **Audio/Video API**：HTML5的Media API使得在网页中内嵌音频和视频变得简单，无需依赖Flash或其他插件。`<audio>`和`<video>`元素提供了播放、暂停、控制音量等功能。例如，`elem.play()`用于播放媒体，`elem....
HTML5 API文档中文版是为前端开发者提供的一份详尽的参考资源，旨在帮助开发者更好地理解和运用HTML5的新特性及API。这份文档以CHM（Compiled Help Manual）格式呈现，通常这种格式便于离线查阅，内容组织清晰，搜索...
HTML5 API中文帮助文档是为开发者提供的一份详尽指南，涵盖了HTML5中引入的各种新的接口、元素和功能。这份文档对于深入理解和有效利用HTML5的潜力至关重要。HTML5是超文本标记语言（HTML）的最新版本，它旨在增强...
6. `Audio/Video API`：内置对音频和视频的支持，无需插件即可播放媒体文件，并提供了丰富的控制接口。 7. `SVG (Scalable Vector Graphics)`：支持矢量图，可无限缩放而不失真，常用于徽标、图标等。 8. `WebRTC`...
8. **Audio/Video多媒体支持**：HTML5的`<audio>`和`<video>`元素可以直接在网页中嵌入音频和视频，无需依赖Flash等插件，提供了更简单的多媒体处理。 9. **WebSocket**：WebSocket是一种在客户端和服务器之间建立...
这个"html5中文api"资源是一个专为中文用户设计的学习工具，包含了HTML5的开发手册，以CHM（Compiled Help Manual）格式提供，这是一种常见的Windows帮助文档格式。 HTML5的API（Application Programming Interface...
- `html5-canvas-china-map.rar`：这是一个使用HTML5 Canvas绘制中国地图的例子，展示了Canvas API如何用于地理数据可视化。Canvas允许开发者在网页上进行动态图形绘制，通过JavaScript控制图形的绘制、擦除和更新...
在HTML5中，API的使用得到了极大的扩展，引入了许多新的API，如Canvas绘图API、WebSocket实时通信API、Geolocation定位API、Audio和Video多媒体处理API、离线存储的Application Cache等。这些API极大地丰富了网页的...
- 这个API与HTML5中的`<video>`和`<audio>`元素配合使用，提供了更为简便的方式来播放多媒体内容。 ##### 4. 历史记录API - 它使开发者能够更精细地控制用户浏览历史，比如记录用户的导航动作、恢复之前的页面...
HTML5新增和移除的元素 HTML5基本布局 HTML5对表单的支持 HTML5 DOM变化 HTML5的Javascript APIs Canvas Video/Audio Drag&Drop Geolocation Application Cache Database Storage X-Document Messaging
书中充满了HTML5特性的实用、真实的示例，展示如何使用Canvas、SVG、Web和Offline Storage、WebSocket、Audio/Video、表单、Geolocation等HTML5的核心技术来开发前沿的HTML5 Web应用程序。 本书首先会介绍HTML5的...
6. **Audio/Video API**：内建的音频和视频播放器，支持多种格式，可以进行流媒体播放、控制播放进度等。 7. **Geolocation API**：获取用户地理位置信息，用于地图应用、本地搜索等。 8. **Web Storage（Local ...
HTML5不仅仅是标记语言，还包含了一系列的Web API，如Audio、Video、Geolocation、WebSocket等，这些都在这个项目中得到了应用。 【标签】"html5 多媒体 游戏"进一步强调了这个项目的核心特性。HTML5的多媒体支持...
3. **Audio & Video API**：HTML5新增了`audio`和`video`元素，使得在网页中嵌入多媒体内容变得简单。同时，JavaScript API允许对音频和视频进行控制，如播放、暂停、音量调整等，甚至可以实现复杂的媒体操作，如...
为读者清晰解读了HTML5规范的缘由、发展和现状，全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新特性构建先进的Web应用，并以大量的示例涵盖全部HTML5 API。此外，还介绍...
为读者清晰解读了HTML5规范的缘由、发展和现状，全面展示了如何使用 WebSocket、Geolocation、Web Storage、Canvas及音频视频等前所未有的新特性构建先进的Web应用，并以大量的示例涵盖全部HTML5 API。此外，还介绍...