HTML5就是牛，可以直接播放音视频，还可以作图；

一、HTML5中播放视频和音频：

加载时直接播放音频的方式：new Audio("BY2.mp3").play();

播放器

视频

音频

var video = $("#mp")[0];

video.play();

简单播放器

二、可伸缩的矢量图形SVG：

Scalable Vector Graphics: 可伸缩Scalable是因为画的图是分辨率无关的;

一个简单的SVG时钟：

SVG时钟

12

6

9

3

css:#clock{stroke:black;stroke-linecap:round;

}g>text{font-family:sans-serif;font-size:6pt;

}

js:

function updateTime(){

var now = new Date();

var second = now.getSeconds();

var min = now.getMinutes();

var hour= (now.getHours()%12)+min/60;

var secondangele = second*6; //6°是一秒钟

var minangle = min*6; //6°是一分钟

var hourangle= hour*30; //30°是一小时

$("#hourhand").attr("transform","rotate("+hourangle+",50,50)");

$("#minutehand").attr("transform","rotate("+minangle+",50,50)");

$("#secondhand").attr("transform","rotate("+secondangele+",50,50)");

}

$(function(){

setInterval("updateTime()", 1000);

});

三、HTML5的

IE9之前版本的浏览器不支持；

修改绘制的图形就必须把当前的擦除在重新绘制，而使用SVG绘制的图形，可以通过简单的移除相应的元素来修改图片；

JS:

var c = $("#my_canvas")[0].getContext(\'2d\');

c.beginPath();

//画线

c.lineTo(100,100);

//画圆 圆心x,y 半径r 开始和结束角度,弧形方向

c.arc(x,y,r,0,2*MATH.PI,false);

//画矩形 四个参数 左上顶点，长和宽；

c.fillRect(); c.strokeRect(); c.clearRect();c.rect()

四、获取地理位置：

function loc(){

if(navigator.geolocation){

var options = {

timeout:50000

};

var successCallback = function(pos){

$("#loc").html(pos.coords.accuracy+" meters latitude: "+

pos.coords.latitude+" longitude:"+ pos.coords.longitude);

};

var errorCallback = function(e){

$("#loc").html(e.code+":"+e.message);

};

// 获取当前位置

navigator.geolocation.getCurrentPosition(successCallback, errorCallback, options)

}

};

//监测当前位置

navigator.geolocation.watchPosition(successCallback, errorCallback, options);

//停止监视位置

navigator.geolocation.clearWatch();

五、Web Worker:

解决客户端javaScript无法多线程的问题；Worker是指执行代码的并行线程；

一个简单的例子：

1、HTML代码：

Web Worker

100000*10000循环

WebWorker----100000*10000循环

2、js代码：

functioncomputer(){var start= newDate().getTime();var num = 1;for (var int = 1; int < 100000; int++) {for (var int2 = 0; int2 < 100000; int2++) {

num= int+num;

}

}var end = newDate().getTime();

$("#result").html("计算结果:" +num + "==耗时："+ (end-start));

}functioncomputerWorker(){var start = newDate().getTime();var worker = new Worker(\'myworker.js\');

worker.postMessage(100000);var end = newDate().getTime();

worker.onmessage= function(e){var num =e.data;

$("#resultWorker").html("计算结果:" +num + "==耗时："+ (end-start));

}

}

JS代码

onmessage = function(e){

console.log(e);

postMessage(computerNum(e.data));

};functioncomputerNum(numData){

console.log(numData);var num = 1;for (var int = 1; int < 100000; int++) {for (var int2 = 0; int2 < 100000; int2++) {

num= int+num;

}

}returnnum;

}

myworker.js

通过Worker()构造函数创建的新的Worker的时候，指定包含的JS代码会运行在一个全新的javaScript环境中，与其创建者脚本隔离；该新的运行环境有一个全局对象WorkerGlobalScope；WorkerGlobalScope有所有JavaScript全局对象拥有的那些属性，如JSON对象 isNaN函数和Date构造函数等，其还拥有一些客户端Window的一些属性，如self location navigator和几种计时器方法 setTimeout setInterval()等；测试时发现不支持doucment.get*等函数,可能还不支持文档交互，但是已经支持log输出(chrome)；

六、二进制数据Blob和文件系统API:

1、Blob对象是JavaScript中代表二进制数据的对象；提供了操作二进制数据的接口，在其基础上，实现了FielList对象、File对象、FileReader对象等操作文件的API；在支持的浏览器中，元素上的files属性就是一个FileList对象，代表多个File对象，一个Flle对象就是一个Blob对象；FileReader对象可以访问Blob中的字符或字节；

文件上传

functionfileInfo(files){for (var int = 0; int < files.length; int++) {var reader = newFileReader();

reader.readAsText(files[int]);

reader.οnlοad= function(){

console.log(reader.result);

};

reader.οnerrοr= function(e){

console.log("Error",e);

};

}

}

一个读取文件的小例子

2、创建或获取Blob的方法：

1、var bb = new Blob("text is hhh"); //传入字符创建新的blod;

2、bb = new BlobBuilder(); bb.append("text is hhhh"); //方便追加字符；

3、bb.silce(0,1024); //将Blob对象按照字节分块，返回新的Blob对象；

3、Blob URL：操作Blob，通过createObjectURL(blob)创建一个URL指向改Blob;

4、操作本地文件系统：

一、获取一个表示本地文件系统的对象：

1、Web Worker中使用 var fs = requestFileSystemSync(PERSISTENT,1024*1024); //传入有效期和大小参数；

2、使用全局函数获取：

varfilesystem;

requestFileSystem(TEMPORARY,50*1024*1024,function(fs){

filesystem=fs;

},functionerror(e){

console.log(e);

});

3、操作文件：测试时，不能操作啊！

七、WebSocket:

浏览器端代码：

聊聊

window.οnlοad= function(){varnick=prompt("who are you?");varinput=document.getElementById("input");

input.focus();vardiv=document.createElement("div");

document.body.insertBefore(div, input);varsocket= newWebSocket("ws://10.7.6.7/");

input.οnchange= function(){varmsg=nick+":"+input.value;

scoket.send(msg);varnode=document.createTextNode(msg);

div.appendChild(node);

input.value= "";

};

input.onmessage= function(event){varmsg=event.data;varnode=document.createTextNode(msg);

div.appendChild(node)

input.scrollIntoView();

};

}

chat.html

node服务端代码：

var http = require("http");var ws = require("webscoket-server");var httpserver = newhttp.Server();var clientui = require(\'fs\').readFileSync("webchat.html");

httpserver.on("request",function(request,response){if(request.url ==="/"){

response.writerHead(200,{"Content-Type":"text/html"});

response.write();

response.end();

}else{

response.writeHead(404);

response.end();

}

});var wsserver =ws.createServer({server:httpserver});

wsserver.on("connection",function(socket){

scoket.send("w t caht room");

socket.on("message",function(msg){

wsserver.broadcast(msg);

});

});

wsserver.listen(8000);

scoket.js

聊聊

总结

以上是生活随笔为你收集整理的html5之api,HTML5之API(示例代码)的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。