返回上一页
客服QQ
客服QQ
一切从沟通开始……
HTML5 API简介一(Canvas,Audio/Video,Geolocation)
作者：睿美印象网站建设工作室 发布日期：2012-11-18
1.Canvas
顾名思义，画布，你在上面画画
XML/HTML Code复制内容到剪贴板
<!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
无需插件，播放音频，视频，每个浏览器能支持的格式不一样，自己掂量吧
XML/HTML Code复制内容到剪贴板
<!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的播放
XML/HTML Code复制内容到剪贴板
<!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播放和控制
XML/HTML Code复制内容到剪贴板
<!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的地理服务，看看代码，也比较简单
JavaScript Code复制内容到剪贴板
<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>
转载请注明：睿美印象网站建设工作室www.ruimeiyx.com
顾名思义，画布，你在上面画画
XML/HTML Code复制内容到剪贴板
<!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
无需插件，播放音频，视频，每个浏览器能支持的格式不一样，自己掂量吧
XML/HTML Code复制内容到剪贴板
<!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的播放
XML/HTML Code复制内容到剪贴板
<!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播放和控制
XML/HTML Code复制内容到剪贴板
<!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的地理服务，看看代码，也比较简单
JavaScript Code复制内容到剪贴板
<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>
转载请注明：睿美印象网站建设工作室www.ruimeiyx.com
已有 0 条评论
暂无评论
- line-height详解
- HTML5原创中文教程《一步一步学做游戏》汇总
- 仿AS语法来写HTML5—第6章，TextField与输入框
- 一步一步学做游戏 第三回：让熊动起来
- HTML5基础教程系列：第1部分，初试锋芒
- IE7.JS解决IE兼容性问题方法
- 16、【视频】CSS强制换行与强制不换行
- CSS浏览器常见兼容问题汇总
- HTML5网页如何让所有的浏览器都能识别HTML5标签样式
- firefox背景水平不平铺
- 哪些情况下需要CSS隐藏文字？
- HTML5基础，第1部分：初试锋芒
- 《精通HTML5编程》第十章：离线应用和尚未广泛支
- 实例解决IE6下常遇到的6个bug
- 如何制作一个HTML5的iPhone应用程序
- HTML5 API简介一(Canvas,Audio/Video,Geolocation)
版权所有：睿美印象网络网站建设工作室 2010-2012 服务热线：15636322282（网站建设工作室）
