HTML5知識點總結

阿新 • • 發佈：2019-01-07

Web Workers

javaScript語言採用的是單執行緒模型，也就是說，所有任務排成一個佇列，一次只能做一件事。
Web Worker的目的:就是為JavaScript創造多執行緒環境，允許主執行緒將一些任務分配給子執行緒。在主執行緒執行的同時，子執行緒在後臺執行，兩者互不干擾。等到子執行緒完成計算任務，再把結果返回給主執行緒。
當在 HTML 頁面中執行指令碼時，頁面的狀態是不可響應的，直到指令碼已完成。web worker 是執行在後臺的 JavaScript，獨立於其他指令碼，不會影響頁面的效能。您可以繼續做任何願意做的事情：點選、選取內容等等，而此時 web worker 在後臺執行。可以讓web應用程式具備後臺處理能力，對多執行緒的支援非常好。

Web Worker API

new Worker(‘後臺處理的JS地址’)
使用Web Worker：
例項化Worker物件並傳入要執行的Javascript檔名就可以建立一個新的Web Worker。
例如：var worker = new Worker(“worker.js”);
這行程式碼會導致瀏覽器下載worker.js，但只有Worker接收到訊息才會實際執行檔案中的程式碼。
利用postMessage傳輸資料
要給Worker傳遞訊息，可以使用postMessage()方法。
Worker是通過message和error事件與頁面通訊的。來自Worker的資料儲存在event.data

中。Worker返回的資料也可以是任何能夠被序列化的值。
Worker不能完成給定的任務時就會觸發error事件。具體來說，Worker內部的JavaScript在執行過程中只要遇到錯誤，就會觸發error事件。發生error事件時，事件物件中包含3個屬性：****filename、lineto和message，分別表示發生錯誤的檔名、程式碼行號和完整的錯誤資訊
terminate() 方法:終止 web worker，並釋放瀏覽器/計算機資源(這個方法是在頁面中呼叫的)
importScripts(‘匯入其他JS檔案’)

Worker全域性作用域

關於Web Worker，最重要的是：

要知道它所執行的JavaScript程式碼完全在另一個作用域中，與當前網頁中的程式碼不共享作用域。在Web Worker中，同樣有一個全域性物件和其他物件以及方法。但是，Web Worker中的程式碼不能訪問DOM，也無法通過任何方式影響頁面的外觀。
Web Worker中的全域性物件是worker物件本身。也就是說，在這個特殊的全域性作用域中，this和self引用的都是worker物件。
為了便於處理資料，Web Worker本身也是一個最小化的執行環境：

最小化的navgator物件 : online、appName、appVersion、userAgent、platform
只讀的location物件 : 所有屬性都是隻讀的
self : 指向全域性 worker 物件
所有的ECMA物件，Object、Array、Date等
XMLHttpRequest構造器
setTimeout和setInterval方法
close()方法，立刻停止worker執行(在worker內部使用，而terminate() 方法是在頁面中呼叫的)
importScripts方法
在Worker的全域性作用域中，我們可以呼叫importScripts方法來接收一個或者多個JavaScript檔案的URL。每個載入過程都是非同步進行的，因此所有指令碼載入並執行之後，importScripts()才會執行。
例如：
importScripts(‘file1.js’,’file2.js’);
即使file2.js先於file1.js下載完，執行的時候仍然會按照先後順序執行。這些指令碼都是在Worker的全域性作用域中執行的。Worker中的指令碼一般都具有特殊的用途，不會像頁面中的指令碼那麼功能寬泛。

Web Worker的執行環境與頁面環境相比，功能是相當有限的。
Demo1:

<body>
<p>計數：<span id="res"></span></p>
<input type="button" name="" value="開始計數" onclick="startWorker()">
<input type="button" name="" value="停止計數" onclick="stopWorker()">
<script type="text/javascript">
var w;
function startWorker(){
    //先判斷是否支援Web Worker
    if(typeof(Worker) !== "undefined"){
        if(typeof(w) == "undefined"){
        //新建一個worker物件
            w = new Worker("webworker1.js");
        }
        w.onmessage = function(e){
            document.getElementById("res").innerHTML = e.data;
        }
    }else{
        alert("對不起，當前瀏覽器不支援web Workers");
    }
}
function stopWorker(){
    w.terminate();
    w = undefined;
}
</script>
</body>

webworker1.js

var i=0;
function numCount(){
    i++;
    self.postMessage(i);
    setTimeout("numCount()",500);
}
numCount();

Demo2:

<script type="text/javascript">
var data = [23,87,45,12,56,9,34];
console.log("排序前:"+data);
var worker = new Worker("webworkers2.js");
worker.onmessage = function(e){
    var data = e.data;
    console.log("排序後:"+data);//排序後:9,12,23,34,45,56,87
};
worker.onerror = function(e){
    console.log("Error:"+e.filename+"("+e.lineto+"):"+e.message);
}
worker.postMessage(data);
</script>

webworker2.js

//這裡self引用的是Worker全域性作用域中的worker物件(與頁面中的Worker物件不是同一個物件)
self.onmessage = function(e){
    var data = e.data;
    data.sort(function(a,b){
        return a-b;//從小到大排序
    });
    //Worker完成工作後，通過呼叫postMessage()可以把資料再發回頁面
    //這裡將陣列排序後的結果發回頁面
    //排序的確是比較消耗時間的操作，因此轉交給Worker做就不會阻塞使用者介面了
    self.postMessage(data);
};

當頁面在worker物件上呼叫postMessage()方法時，資料會以非同步方式被傳遞給worker，進而觸發worker中的message事件。為了處理來自頁面的資料，同樣也需要建立一個onmessage事件處理程式。
Web Worker:可以執行非同步Javascript程式碼，避免阻塞使用者介面。在執行復雜計算和資料處理的時候，這個API非
常有用；否則，這些任務輕則會佔用很長時間，重則會導致使用者無法與頁面互動。

Hisyory API

在HTML5之前，即使採用的是指令碼語言的方式，只要瀏覽器位址列中的URL地址被切換，都會觸發一個頁面重新整理的過程，這個過程將耗費一些時間與資源。在很多時候，尤其是在兩個大部分內容相同的頁面之間進行切換時，這個過程往往被視為一種浪費。
HTML5的Hisyory API允許在不重新整理頁面的前提下，通過指令碼語言的方式來進行頁面上某塊區域性內容的更新。
處理方式：

通過Ajax請求向伺服器端請求頁面B與頁面A中不同的區域性區域及該區域中的資訊
在頁面A中通過指令碼語言裝載該區域及其中的資訊
通過Hisyory API在不重新整理頁面的前提下在瀏覽器的位址列中從頁面A的URL地址切換到頁面B的URL地址

在Hisyory API中，我們使用pushState方法在載入完相應的檔案後，將該檔案的URL地址新增到瀏覽器的歷史記錄中。
pushState方法使用3個引數：

引數1：可以為任何物件，用於儲存一個當用戶單擊瀏覽器後退按鈕或前進按鈕時可以使用的資料
引數2：可以為一個字串，用於設定瀏覽器視窗的標題，但是目前尚沒有任何瀏覽器支援該引數的使用，所以暫時可以將該引數設為null
引數3：是可選引數，引數值可以為任何URL地址，該URL地址將出現在使用者單擊瀏覽器後退按鈕或前進按鈕後瀏覽器的位址列中

此外，我們還需要監聽popstate事件，當用戶單擊瀏覽器的後退或前進按鈕時觸發該事件，在事件處理函式中讀取觸發事件的事件物件的state屬性值，該屬性值即為執行pushState()方法時所使用的第一個引數值，其中儲存了在向瀏覽器歷史記錄中新增記錄時同步儲存的物件，可以讀取該物件並根據該物件值設定當前頁面中所需顯示的資料。

我GitHub上的一個History API使用示例：傳送門

canvas

canvas寬高設定

canvas跟其他標籤一樣，也可以通過css來定義樣式。但這裡需要注意的是：canvas的預設寬高為300px * 150px,在css中為canvas定義寬高，實際上把寬高為300px * 150px的畫布進行了拉伸，如果在這樣的情況下進行canvas繪圖，你得到的圖形可能就是變形的效果。所以，在canvas繪圖時，應該在canvas標籤裡直接定義寬高。
在css中定義的canvas寬和高只是其在html中的顯示寬高，不是canvas的真實解析度，canvas的真是解析度需要通過其width和height屬性來設定。

save和restore方法

save()方法呼叫後,將所有設定都會進入一個棧結構，得以妥善保管。然後可以對上下文進行其他修改
棧結構–>後進先出
想要返回之前儲存的設定，可以呼叫restore()方法，在儲存設定的棧結構中向前返回一級，恢復之前的狀態。
連續呼叫save()方法可以將更多設定儲存在棧結構中，之後再連續呼叫restore()方法則可以一級一級返回

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Canvas Save-Restore</title>
</head>
<body>
<canvas id="drawing" width="200" height="200">
當前瀏覽器不支援canvas
</canvas>
<script type="text/javascript">
var drawing = document.getElementById("drawing");
//確保瀏覽器支援canvas元素
if (drawing.getContext){
var context = drawing.getContext("2d");
context.fillStyle = "#ff0000";//紅色
context.save();//呼叫save()方法儲存上下文狀態
context.fillStyle = "#00ff00";//綠色
context.translate(100, 100);//把座標原點變換到(100, 100)
context.save();//呼叫save()方法儲存上下文狀態
context.fillStyle = "#0000ff";//藍色
context.fillRect(0, 0, 100, 200);   //因為此時的座標原點已經變為(100, 100)，所以從(100, 100)點開始繪製藍色矩形
context.restore();//呼叫restore()，fillStyle變為綠色，因為座標位置的變換仍然起作用，所以矩形的起點座標是(110, 110)
context.fillRect(10, 10, 100, 200);   //從 (110, 110)點開始繪製綠色矩形
context.restore();//再一次呼叫restore()，fillStyle變為紅色，座標位置的變換不起作用了，所以矩形的起點座標是(0, 0)
context.fillRect(0, 0, 100, 200);    //從(0,0)點開始繪製紅色矩形
//特別注意，save()方法儲存的是對繪圖上下文的設定和變換，不會儲存繪圖上下文的內容
            }
</script>
</body>
</html>

toDataURL方法

toDataURL()方法可以匯出在canvas元素上繪製的影象，該方法接收一個引數：影象的格式型別

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>toDataURL方法</title>
</head>
<body>
<canvas id="drawing" width="200" height="200">
當瀏覽器不支援canvas元素
</canvas>
<input type="button" value="匯出圖片" id="export-btn" >
<p>點選匯出圖片，即可以將影象變成圖片元素，右鍵點選圖片元素即可以將它儲存到本地</p>
    <script type="text/javascript">
            var drawing = document.getElementById("drawing"),
            btn= document.getElementById("export-btn");
            //確保瀏覽器支援canvas元素
            if (drawing.getContext){
                var context = drawing.getContext("2d");

                //繪製紅色矩形
                context.fillStyle = "#ff0000";
                context.fillRect(10, 10, 50, 50);

                //繪製半透明的藍色矩形
                context.fillStyle = "rgba(0,0,255,0.5)";
                context.fillRect(30, 30, 50, 50);
            }

            btn.onclick = function()
            {
                //取得影象資料的URI
                //var imgURI = drawing.toDataURL();
                //這裡沒有指定影象的型別格式，預設是png格式的影象
                var imgURI = drawing.toDataURL("image/png");

                //顯示影象
                var image = document.createElement("img");
                image.src = imgURI;
                document.body.appendChild(image);
            };
    </script>
</body>
</html>

Geolocation（地理定位）

HTML5 Geolocation（地理定位）用於定位使用者的位置

地理位置物件navigator.geolocation

getCurrentPosition() 方法

可以使用 getCurrentPosition() 方法來獲得使用者的位置，該方法接收3個引數：請求成功函式、請求失敗函式和資料收集方式
請求成功函式：

經度 : coords.longitude
緯度 : coords.latitude
位置準確度 : coords.accuracy
海拔 : coords.altitude
海拔準確度 : coords.altitudeAcuracy
行進方向 : coords.heading 從正北開始以度計
地面速度 : coords.speed 以米/每秒計
時間戳 : new Date(position.timestamp) 響應的日期/時間
請求失敗函式：
失敗編號：code
0(Unknown_error) : 不包括其他錯誤編號中的錯誤
1( Permission denied) : 使用者拒絕瀏覽器獲取位置資訊
2(Position unavailable) : 嘗試獲取使用者資訊，但失敗了
3(Timeout ) : 設定了timeout值，獲取位置超時了

資料收集方式：json的形式
enableHighAcuracy : 更精確的查詢，預設false
timeout : 獲取位置允許最長時間，預設infinity
maximumAge : 位置可以快取的最大時間，預設0

Demo1:

<body>
<div id="demo"></div>
<input type="button" name="" value="點選獲取位置" onclick="getLocation();">
<script type="text/javascript">
var x=document.getElementById("demo");
function getLocation(){
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition,showError);
    }
  else{
    x.innerHTML="該瀏覽器不支援獲取地理位置。";
  }
  }
function showPosition(position)
  {
  x.innerHTML="緯度: " + position.coords.latitude +
  "<br>經度: " + position.coords.longitude;
  }
  function showError(error)
  {
  switch(error.code)
    {
    case error.PERMISSION_DENIED:
    // alert(error.code);  1
      x.innerHTML="使用者拒絕對獲取地理位置的請求。"
      break;
    case error.POSITION_UNAVAILABLE:
    // alert(error.code);  2
      x.innerHTML="位置資訊是不可用的。"
      break;
    case error.TIMEOUT:
    // alert(error.code);  3
      x.innerHTML="請求使用者地理位置超時。"
      break;
    case error.UNKNOWN_ERROR:
    // alert(error.code);  0
      x.innerHTML="未知錯誤。"
      break;
    }
  }
</script>
</body>

Demo2:

<body>
<input type="button" value="請求" id="btn" /><br>
<textarea id="t1" style="width:400px; height:400px; border:1px #000 solid;">
</textarea>
<script type="text/javascript">
var oBtn = document.getElementById('btn');
    var oTxt = document.getElementById('t1');
    oBtn.onclick = function(){
    navigator.geolocation.getCurrentPosition(function(position){
            oTxt.value += '經度:' + position.coords.longitude+'\n';
            oTxt.value += '緯度 :' + position.coords.latitude+'\n';
            oTxt.value += '準確度 :' + position.coords.accuracy+'\n';
            oTxt.value += '海拔 :' + position.coords.altitude+'\n';
            oTxt.value += '海拔準確度 :' + position.coords.altitudeAcuracy+'\n';
            oTxt.value += '行進方向 :' + position.coords.heading+'\n';
            oTxt.value += '地面速度 :' + position.coords.speed+'\n';
            oTxt.value += '時間戳:' + new Date(position.timestamp)+'\n';
        },function(err){
            //err.code--失敗所對應的編號
            alert( err.code );
        },{
            enableHighAcuracy : true,
            timeout : 5000,
            maximumAge : 5000//設定快取過期時間，提高效能
        });
    };
</script>
</body>

watchPosition() 方法

watchPosition() - 多次定位請求(像setInterval) ,返回使用者的當前位置，並繼續返回使用者移動時的更新位置（就像汽車上的 GPS）。移動裝置有用，位置改變才會觸發
配置引數：frequency 表示更新的頻率
clearWatch() - 停止 watchPosition() 方法(像clearInterval)
Demo:

<body>
<input type="button" value="請求" id="btn" /><br>
<textarea id="t1" style="width:400px; height:400px; border:1px #000 solid;">
</textarea>
<script type="text/javascript">
    var oBtn = document.getElementById('btn');
    var oTxt = document.getElementById('t1');
    var timer = null;
    oBtn.onclick = function(){
        //多次請求
        timer = navigator.geolocation.getCurrentPosition(function(position){
            oTxt.value += '經度:' + position.coords.longitude+'\n';
            oTxt.value += '緯度 :' + position.coords.latitude+'\n';
            oTxt.value += '準確度 :' + position.coords.accuracy+'\n';
            oTxt.value += '海拔 :' + position.coords.altitude+'\n';
            oTxt.value += '海拔準確度 :' + position.coords.altitudeAcuracy+'\n';
            oTxt.value += '行進方向 :' + position.coords.heading+'\n';
            oTxt.value += '地面速度 :' + position.coords.speed+'\n';
            oTxt.value += '時間戳:' + new Date(position.timestamp)+'\n';
        },function(err){
            //err.code--失敗所對應的編號
            alert( err.code );
            navigator.geolocation.clearWatch(timer);//關閉更新請求
        },{
            enableHighAcuracy : true,
            timeout : 5000,
            maximumAge : 5000,//設定快取過期時間，提高效能
            frequency : 1000
        });
    };
</script>
</body>

應用Demo:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>地理位置應用</title>
    <style type="text/css">
        #box{
            width: 500px;
            height: 500px;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <input type="button" name="" value="獲取位置" id="btn">
    <div id="box"></div>
    <script src="http://api.map.baidu.com/api?v=1.4"></script>
    <script type="text/javascript">
    var oBtn = document.getElementById('btn');
    oBtn.onclick = function(){
        navigator.geolocation.getCurrentPosition(function(position){
            //獲取經度和緯度
            var y = position.coords.longitude;
            var x = position.coords.latitude;
            // 百度地圖API功能
            var map = new BMap.Map("box");
            // 初始化地圖,設定中心點座標和地圖級別
            var pt = new BMap.Point(y, x);

            map.centerAndZoom(pt, 14);
            map.enableScrollWheelZoom();//開啟滑鼠滾輪縮放
            //建立圖片
            var myIcon = new BMap.Icon("dut.jpg", new BMap.Size(200,200));
            var marker2 = new BMap.Marker(pt,{icon:myIcon});  // 建立標註
            map.addOverlay(marker2);// 將標註新增到地圖中
            //建立資訊視窗
            var opts = {
              width : 200, // 資訊視窗寬度
              height: 60, // 資訊視窗高度
              title : "大連理工大學"// 資訊視窗標題
            }
            var infoWindow = new BMap.InfoWindow("高等學府", opts);//建立資訊視窗物件
            map.openInfoWindow(infoWindow,pt); //開啟資訊視窗
        });
    };
    </script>
</body>
</html>

WebSocket

Socket.IO類庫實現WebSocket通訊

Socket.IO類庫可以接收所有與伺服器端相連線的客戶端傳送的訊息，也可以向這些客戶端傳送訊息。該類庫的一個顯著特徵是在伺服器端與瀏覽器之間提供一個共享介面。

Socket.IO

客戶端：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>socket.io</title>
</head>
<body>
    <script type="text/javascript" src="/socket.io/socket.io.js"></script>
    <script type="text/javascript">
    /*
    /socket.io/socket.io.js由伺服器端Socket.IO類庫自動提供，不需要在客戶端實際放置一個socket.io.js檔案
    這裡首先使用Socket.IO類庫中的io.connect方法連線伺服器端Socket.IO伺服器
     */
        var socket = io.connect();//io.connect()返回一個Socket物件，代表一個用於與伺服器端建立連線的客戶端socket埠物件
        //客戶端與伺服器建立連線後，當接收到服務端傳送訊息時，觸發客戶端socket埠物件的message事件
        socket.on('message', function(data){//data為伺服器端傳送的訊息
            console.log(data);
            //使用客戶端socket埠物件的send方法向服務端傳送一條訊息
            socket.send('訊息已接收到。');
        });
        //當伺服器端斷開連線時觸發客戶端socket埠物件的disconnect事件
        socket.on('disconnect', function() {
            console.log('伺服器端斷開連線。');
        });
        /*
        注意：客戶端的訊息處理機制與伺服器端的訊息處理機制是完全一致的，因為Socket.IO確保客戶端與伺服器端共享相同的API
         */
    </script>
</body>
</html>

伺服器端：

var http = require('http');//引入HTTP模組
var sio = require('socket.io');
var fs = require('fs');//引入fs模組
var server = http.createServer(function(req, res) {
    res.writeHead(200, { 'Content-type': 'text/html'});
    res.end(fs.readFileSync('./index.html'));
});
server.listen(1337);
/*
server是一個HTTP伺服器，監聽1337埠
使用Socket.IO類庫很簡單，建立一個Socket.IO伺服器即可，但是該伺服器依賴於一個已經建立的HTTP伺服器。
在HTTP伺服器執行之後，使用listen方法為該HTTP伺服器附加一個Socket.IO伺服器。
 */
var socket = sio.listen(server);//這裡listen方法返回一個Socket.IO伺服器
//這裡當客戶端與伺服器建立連線時，觸發Socket.IO伺服器的connection事件，可以通過監聽該事件並指定事件回撥函式的方法
//指定當客戶端與伺服器建立連線時所需執行的處理
socket.on('connection', function(socket){
    console.log('客戶端建立連線。');
    socket.send('你好。');
    socket.on('message', function(msg) {//msg為客戶端傳送的訊息
        console.log('接收到一個訊息: ',msg);
    });
    //當客戶端斷開連線時觸發socket埠物件的disconnect事件
    socket.on('disconnect', function() {
        console.log('客戶端斷開連線。');
    });
});
/*
客戶端與伺服器建立連線後，當接收到客戶端傳送訊息時，觸發socket埠物件的message事件
 */

emit方法互相傳送事件

使用Socket.IO類庫時，伺服器端與客戶端之間除了可以互相傳送訊息之外，也可以使用socket埠物件的emit方法互相傳送事件
socket.emit(event,data,[callback])

event引數值為一個用於指定事件名的字串
data引數值代表該事件中攜帶的資料
callback用於指定一個當對方確認收到資料時呼叫的回撥函式
客戶端：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>socket.io</title>
</head>
<body>
    <script type="text/javascript" src="/socket.io/socket.io.js"></script>
    <script type="text/javascript">
    var socket = io.connect();
    //在接收到伺服器端傳送的news事件後，輸出相應的伺服器端傳遞的資訊
    socket.on('news', function (data) {
            console.log(data.hello);
        //同時向伺服器傳送my other event事件，該事件攜帶一個物件，物件的my屬性值為"data"字串
        socket.emit('my other event',{my:'data'});
    });
    </script>
</body>
</html>

伺服器端：

var http = require('http');
var sio = require('socket.io');
var fs = require('fs');
var server = http.createServer(function(req, res) {
    res.writeHead(200, { 'Content-type': 'text/html'});
    res.end(fs.readFileSync('./index.html'));
});
server.listen(1337);
var socket = sio.listen(server);
//在客戶端與伺服器端建立連線後，向客戶端傳送一個news事件，事件中攜帶一個物件，該物件的hello屬性值為"你好"
socket.on('connection', function(socket){
    socket.emit('news', {hello: '你好。' });
    //在接收到客戶端傳送的my other event事件時，在控制檯輸出相應的資訊
    //data為客戶端傳送事件中攜帶的資料
    socket.on('my other event', function (data) {
        console.log('伺服器端接收到資料：%j',data);
    });
});

HTML5知識點總結

Web Workers

Web Worker API

Worker全域性作用域

Hisyory API

canvas

canvas寬高設定

save和restore方法

toDataURL方法

Geolocation（地理定位）

地理位置物件navigator.geolocation

getCurrentPosition() 方法

watchPosition() 方法

WebSocket

Socket.IO類庫實現WebSocket通訊

Socket.IO

emit方法互相傳送事件

HTML5知識點總結

使用html5中video自定義播放器必備知識點總結以及JS全屏API介紹

CSS3主要知識點總結+HTML5新增標籤

html5知識點整理總結

CSS3 主要知識點總結+HTML5 新增標籤

html5-學習坦克大戰知識點總結

HTML5和CSS3動畫效果知識點總結

HTML5與CSS3知識點總結

PHPExcel所遇到問題的知識點總結

PHP面向對象知識點總結

交叉編譯知識點總結

js事件相關知識點總結

css中小知識點總結

[rctf](web)rcdn 解題分析，知識點總結

javascript知識點總結

JavaScript知識點總結之如何提高性能

react native 知識點總結（一）

React Native細節知識點總結<一>

鳥哥Linux私房菜知識點總結3到5章

知識點總結

HTML5知識點總結

Web Workers

Web Worker API

Worker全域性作用域

Hisyory API

canvas

canvas寬高設定

save和restore方法

toDataURL方法

Geolocation（地理定位）

地理位置物件navigator.geolocation

getCurrentPosition() 方法

watchPosition() 方法

WebSocket

Socket.IO類庫實現WebSocket通訊

Socket.IO

emit方法互相傳送事件

相關推薦