HTML5 API简介1(Canvas,Audio/Video,Geolocation)

2012-10-11

HTML5 API简介一(Canvas,Audio/Video,Geolocation)?本文来自：http://www.myext.cn/webkf/18457.html1.Canv

HTML5 API简介一(Canvas,Audio/Video,Geolocation)

本文来自：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>

在浏览器里的样子?

HTML5 API简介1(Canvas,Audio/Video,Geolocation)

?

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的样子?
HTML5 API简介1(Canvas,Audio/Video,Geolocation)

?
如何在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的样子?
HTML5 API简介1(Canvas,Audio/Video,Geolocation)

?

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>

热点排行

CSS

HTML5 API简介1(Canvas,Audio/Video,Geolocation)