/******************************************************
 * @Web Storage
 ******************************************************/
//一直有效，关闭窗口和重启浏览器后数据依然存在
window.localStorage["key"] = value;

//当前装口有效，关闭窗口和重启浏览器后数据消失
window.sessionStorage["key"] = value;

//不能存放函数，如果是函数会被转换成字符串
//每个域的数据是不能共享的

/******************************************************
 * @Web SQL Database
 ******************************************************/
//1.打开数据库
db = openDatabase("DBTest", "1.0", "HTML5 Database API example", 200000);

//2.判断是否打开成功
if (!db) {
    alert("数据库打开失败");
}
else {
    //3.执行sql查询
    db.transaction(function(tx){
        tx.executeSql("SELECT * FROM Table1Test", [], function(tx, result){
            console.log(r = result);
            for (var i = 0, item = null; i < result.rows.length; i++) {
                //提取结果中第i行数据对象，存入item变量，通过item["id"]这种方式获得该行id字段的值
                item = result.rows.item(i);
                console.log(item);
            }
        });
    });

    //4.插入一条记录
    db.transaction(function(tx){
        tx.executeSql("INSERT INTO Table1Test (id, text) VALUES (?, ?)", [num, document.querySelector('#todoitem').value], function(tx, result){
        }, onError);
    });
}
//查询函数，data为替代sql语句中?的变量的数组
tx.executeSql("sql", data, successCallback, errorCallback)
//例如
tx.executeSql("INSERT INTO Table1Test (id, text) VALUES (?, ?)", [10,"text"], successCallback, errorCallback)

/******************************************************
 * @Web Workers
 ******************************************************/
//main.js:父进程脚本
var worker = new Worker('extra_work.js');
worker.onmessage = function(event){
    alert(event.data);
};

//extra_work.js: 被调用的脚本，子进程

// 这里进行你所需要的计算
postMessage(some_data);//当需要通知父进程时调用，参数传入到父进程的onmessage方法中

/******************************************************
 * @Web Sockets
 ******************************************************/
//连接sockets服务器
var socket = new WebSocket("ws://bloga.jp:80/mychat1");

socket.readyState; //连接状态 0:连接中 1:连接成功 2:连接关闭
//当连接成功时
socket.onopen = function(event){
    console.log("connected!");
}
//当从服务器接收到信息时
socket.onmessage = function(event){
    console.log(event.data);
}
//当连接关闭时
socket.onclose = function(event){
    console.log("closed");
}

/******************************************************
 * @Notifications
 ******************************************************/

window.webkitNotifications.checkPermission();//检查是否允许桌面提示 0：允许 1：禁止。桌面提示的允许状态是按域保存的
window.webkitNotifications.requestPermission();//请求用户允许桌面提示

tip = window.webkitNotifications.createNotification("src/dwd1.png", "提示框的标题", "提示框的内容！！！")
tip.show(); //弹出提示框
tip.close(); //关闭提示框

/******************************************************
 * @Geolocation
 ******************************************************/
navigator.geolocation.getCurrentPosition(function(position){

    position.coords //位置坐标
    position.coords.longitude //经度
    position.coords.latitude //纬度
    position.coords.accuracy //精度
    position.coords.altitudeAccuracy //高度的精度
    position.coords.heading //朝向
    position.coords.speed //速度
    position.timestamp //获取坐标的时间戳
});

/******************************************************
 * @Audio + Video
 ******************************************************/
//获得video对象，audio对象也可以通过此方法，需要在html中放置video或audio标签
Media = document.getElementById("vvv");

//audio对象可以通过这个方法快速创建，video不可以。
Media = new Audio("http://directguo.com/html5/src/france.ogg")

//方法和属性。video和audio方法和属性基本相同
Media.src = value; //返回或设置当前资源的URL
Media.currentTime = value; //当前播放的位置，赋值可改变位置
Media.startTime; //一般为0，如果为流媒体或者不从0开始的资源，则不为0
Media.duration; //当前资源长度 流返回无限
Media.paused; //是否暂停
Media.ended; //是否结束
Media.autoPlay = value; //是否自动播放 true/false
Media.loop = value; //是否循环播放 true/false
Media.play(); //播放
Media.pause(); //暂停
Media.controls = value; //是否有默认控制条 true/false
Media.volume = value; //音量
Media.muted = value; //静音 true/false
//TimeRanges(区域)对象 ：该对象描述的是一个或多个区域，例如已经加载的区域为两个部分：1-5.8秒 6-10秒
TimeRanges.length; //区域段数，例如上述例子，应该返回2
TimeRanges.start(i) //第i段区域的开始位置,单位秒
TimeRanges.end(i) //第i段区域的结束位置，单位秒

//事件
eventTester = function(e){//着里定义了一个简单的事件检测函数来检测如下的事件
    Media.addEventListener(e, function(){
        console.log((new Date()).getTime(), e);
    });
}

eventTester("abort"); //客户端主动终止下载（不是因为错误引起），
eventTester("error"); //请求数据时遇到错误
eventTester("play"); //play()和autoplay开始播放时触发
eventTester("pause"); //pause()触发
eventTester("playing"); //开始回放
eventTester("timeupdate"); //播放时间改变
eventTester("ended"); //播放结束
eventTester("ratechange"); //播放速率改变
eventTester("volumechange"); //音量改变

//详细API请看：http://directguo.com/blog/index.php/2010/07/html5-audio-video-tag/

/******************************************************
 * @Canvas2D
 ******************************************************/
var elem = document.getElementById('myCanvas');
var ctx = elem.getContext('2d');

//画矩形
ctx.fillRect(x,y,width,height);  //画一个填充的矩形
ctx.strokeRect(x,y,width,height);  //为一个矩形描边
ctx.clearRect(x,y,width,height);  //清楚一个矩形的一部分并且设为透明
ctx.rect(x, y, width, height); //画矩形

//画路径
ctx.beginPath();//创建路径的第一步是调用beginPath方法，返回一个存储路径的信息
ctx.closePath();//从当前的点到起始点闭合路径
ctx.stroke();//描边路径
ctx.fill();//填充路径
ctx.lineTo(x, y);//从上一个起点到(x,y)的点画线，上一个起点可以通过moveTo来指定，默认为原先路径的终点

//画圆弧
arc(x, y, r, sa, ea, cw);//x,y圆心坐标，r-半径, sa和ea是圆弧的开始和结束弧度cw为true是逆时针，false为顺时针

//画贝塞尔曲线
quadraticCurveTo(cp1x, cp1y, x, y);//二次贝塞尔曲线

//使用图像
drawImage(image, x, y); //image-图像对象

//更多内容请看：http://adamlu.com/?p=157

转自：http://directguo.com/blog/index.php/2010/08/%e9%83%a8%e5%88%86html5%e5%8a%9f%e8%83%bd%e7%9a%84%e6%95%99%e5%ad%a6%e4%bb%a3%e7%a0%81/