摘要：本文是重溫基礎(chǔ)系列文章的第十七篇。系列目錄復(fù)習(xí)資料資料整理個(gè)人整理重溫基礎(chǔ)篇重溫基礎(chǔ)對(duì)象介紹重溫基礎(chǔ)對(duì)象介紹本章節(jié)復(fù)習(xí)的是中的關(guān)于相關(guān)知識(shí)，介紹的比較多。表示在給定的時(shí)間的相關(guān)設(shè)備的位置。所有現(xiàn)代瀏覽器均支持對(duì)象和使用。

本文是 重溫基礎(chǔ) 系列文章的第十七篇。
今日感受：挑戰(zhàn)。

系列目錄：

【復(fù)習(xí)資料】ES6/ES7/ES8/ES9資料整理(個(gè)人整理)

【重溫基礎(chǔ)】1-14篇

【重溫基礎(chǔ)】15.JS對(duì)象介紹

【重溫基礎(chǔ)】16.JSON對(duì)象介紹

本章節(jié)復(fù)習(xí)的是JS中的關(guān)于WebAPI相關(guān)知識(shí)，介紹的API比較多。

前置知識(shí)：
需要了解 JS 對(duì)象 的相關(guān)知識(shí)。

API：應(yīng)用程序接口，是基于編程語(yǔ)言構(gòu)建的結(jié)構(gòu)，使開(kāi)發(fā)人員更容易地創(chuàng)建復(fù)雜的功能。它們抽象了復(fù)雜的代碼，并提供一些簡(jiǎn)單的接口規(guī)則直接使用。

客戶(hù)端JavaScript提供很多可用的API，他們本身不是JavaScript語(yǔ)言的一部分，卻建立在JavaScript語(yǔ)言核心的頂部，為使用JavaScript代碼提供額外的超強(qiáng)能力。他們通常分為兩類(lèi)：

瀏覽器API：

內(nèi)置于Web瀏覽器，可以從瀏覽器和電腦周?chē)h(huán)境獲取數(shù)據(jù)，并用于復(fù)雜的操作。例如Geolocation API提供了一些簡(jiǎn)單的JavaScript結(jié)構(gòu)來(lái)獲取位置數(shù)據(jù)，這種API通常抽象很多復(fù)雜邏輯，我們只要調(diào)用API即可。

第三方API：

缺省情況下不會(huì)內(nèi)置于瀏覽器，而必須在Wen中某個(gè)地方獲取代碼和信息，例如Twitter API可以推送最新推文給我們，它提供一系列第三方API讓我們獲取Twitter的服務(wù)和信息。

那么，這些API是如何工作的？
不同的JavaScript的API工作內(nèi)容不同，但具有以下幾個(gè)相同點(diǎn)：

都是基于對(duì)象

API通過(guò)使用一個(gè)或多個(gè)JavaScript對(duì)象與我們的代碼交互，這些對(duì)象作為API使用的數(shù)據(jù)（包含在對(duì)象屬性中）的容器，和API提供的功能（包含在對(duì)象的方法中）。
如Geolocation API則是由以下幾個(gè)對(duì)象組成：

Geolocation, 包含三種控制地理數(shù)據(jù)檢索的方法。

Position, 表示在給定的時(shí)間的相關(guān)設(shè)備的位置。它包含一個(gè)當(dāng)前位置的Coordinates 對(duì)象。還包含了一個(gè)時(shí)間戳,這個(gè)時(shí)間戳表示獲取到位置的時(shí)間。

Coordinates,包含有關(guān)設(shè)備位置的大量有用數(shù)據(jù)，包括經(jīng)緯度，高度，運(yùn)動(dòng)速度和運(yùn)動(dòng)方向等。

通常這么使用：

navigator.geolocation.getCurrentPosition(function(options){
    // ... do something
});

都有可識(shí)別的入口點(diǎn)

即API的入口位置，如Geolocation API的入口在Navigator.geolocation 屬性, 它返回瀏覽器的 Geolocation 對(duì)象，所有有用的地理定位方法都可用。
在文檔對(duì)象模型(DOM)的API入口位置更簡(jiǎn)單，常常都掛載在Document對(duì)象上，或者HTML元素上：

let a = document.createElement("div");// 創(chuàng)建一個(gè)新的div元素
let b = document.querySelector("div");// 獲取一個(gè)已經(jīng)存在的div元素
a.textContent = "hi leo!";  // 給a元素設(shè)置文本
b.appendChild(a);           // 將a元素添加到b元素下
// 
hi leo!

詳細(xì)的后面介紹。

都使用事件來(lái)處理狀態(tài)的變化

有些特定的API會(huì)包含一些事件，當(dāng)事件觸發(fā)，我們便可以運(yùn)行函數(shù)的處理屬性，做一些不同的操作。例如XMLHttpRequest對(duì)象的實(shí)例，有很多的事件可以調(diào)用。

// 簡(jiǎn)單寫(xiě)
const url = "https://www.baidu.com";
const req = new XMLHttpRequest();
req.open("GET", url);
req.responseType = "json";
req.send();
req.onload = function(){
    // ... do something
}

都會(huì)在適當(dāng)位置提供額外的安全機(jī)制

主要還是處于安全考慮，提供額外的安全機(jī)制，比如常見(jiàn)同源策略，一些特定頁(yè)面只能在https協(xié)議的網(wǎng)頁(yè)工作等。

接下來(lái)看看這些API都能實(shí)現(xiàn)什么作用。

我們?cè)陂_(kāi)發(fā)web頁(yè)面和應(yīng)用時(shí)，就會(huì)經(jīng)常操作頁(yè)面文檔的結(jié)構(gòu)，這里就會(huì)大量用到document對(duì)象，控制HTML和樣式信息的文檔對(duì)象模型（DOM）。
下面貼一張web頁(yè)面視圖中的瀏覽器的主要部分（來(lái)源MDN）：

介紹：

window：是載入瀏覽器的標(biāo)簽，JavaScript中用Window對(duì)象表示，可以實(shí)現(xiàn)很多操作：獲取窗口大小，操作載入窗口的文檔，存儲(chǔ)文檔數(shù)據(jù)等。

navigator：瀏覽器存在web上的狀態(tài)和表示（即用戶(hù)代理），JavaScript中用Navigator對(duì)象表示，用于獲取對(duì)象的一些信息，如：攝像頭的地理信息，用戶(hù)偏愛(ài)的語(yǔ)言等。

document：是實(shí)際載入窗口的頁(yè)面，JavaScript中用Document對(duì)象表示，可以實(shí)現(xiàn)很多文檔操作：獲取DOM元素，修改文本內(nèi)容，設(shè)置新樣式等。

在瀏覽器標(biāo)簽中當(dāng)前載入的文檔用文檔對(duì)象模型(Document Object Model，簡(jiǎn)稱(chēng)DOM)表示。
這是一個(gè)由瀏覽器生成的“樹(shù)結(jié)構(gòu)”，使得編程語(yǔ)言可以很容易訪(fǎng)問(wèn)HTML結(jié)構(gòu)，操作等。

下面是基本的DOM操作：

let a = document.createElement("a");// 1. 創(chuàng)建一個(gè)新的a元素
let b = document.querySelector("a");// 2. 獲取一個(gè)已經(jīng)存在的a元素
a.textContent = "進(jìn)入pingan8787博客";  // 3. 給a元素設(shè)置文本
a.; // 4. 給a元素添加跳轉(zhuǎn)地址
a.style.color = "red";                // 5. 給a元素添加樣式
a.style.backgroundColor = "black";
a.setAttribute("my_class");    // 6. 給a元素添加class類(lèi)名
b.appendChild(a);              // 7. 將a元素添加到b元素下

這么一個(gè)簡(jiǎn)單的例子，實(shí)際可以看出DOM提供的方法很多，下面分類(lèi)介紹下這些方法：

DOM HTML操作

改變HTML輸出流：

通過(guò)document.write()直接修改HTML輸出流寫(xiě)內(nèi)容。

document.write("hello leo");

注意：千萬(wàn)不要在文檔加載之后使用，否則覆蓋文檔。

改變HTML內(nèi)容：

通過(guò)innerHTML屬性來(lái)改變HTML元素的內(nèi)容：

document.getElementById(id).innerHTML = new HTML;
// 通過(guò)ID獲取  （getElementById）
// 通過(guò)name屬性（getElementsByName）
// 通過(guò)標(biāo)簽名  （getElementsByTagName）
// 通過(guò)類(lèi)名    （getElementsByClassName）
// 獲取html的方法 （document.documentElement）
// 獲取body的方法 （document.body）
// 通過(guò)選擇器獲取一個(gè)元素（querySelector）
// 通過(guò)選擇器獲取一組元素（querySelectorAll）

例子：

document.getElementById("id1").innerHTML = "hello leo!"

改變HTML屬性：

通過(guò)attribute屬性來(lái)改變?cè)氐膶傩裕?/p>

document.getElementById(id).attribute = new value

例子：

document.getElementById("id1").src = "leo.png";

詳細(xì)的文檔可以查看HTML DOM Document 對(duì)象

DOM CSS操作

改變HTML樣式

通過(guò)style.styleName屬性修改元素的樣式：

document.getElementById(id).style.property = new style;

例子：

document.getElementById("id1").style.color = "red";
document.getElementById("id1").style.backgroundColor = "green";

注意：style后面的樣式的屬性名只能使用命名小駝峰。

DOM 事件操作

如要對(duì)元素做點(diǎn)擊事件的綁定，可以在HTML的onclick事件屬性上綁定方法：

另外可以綁定的事件類(lèi)型還有很多：

詳細(xì)的文檔可以查看HTML DOM Event 對(duì)象

DOM 節(jié)點(diǎn)操作

創(chuàng)建新的HTML元素

需要先創(chuàng)建一個(gè)新元素節(jié)點(diǎn)，然后在使用appendChild方法，向一個(gè)已存在的元素上追加這個(gè)新元素：

// 創(chuàng)建新元素節(jié)點(diǎn)
let a = document.createElement("p");
let b = document.createTextNode("新的文本");
a.appendChild(b);

// 獲取已存在元素
let div = document.getElementById("id1");

// 追加新元素
div.appendChild(a);

刪除已有的HTML元素

如果需要?jiǎng)h除HTML元素，就必須先獲得該元素的父元素，再使用removeChild方法刪除：

    
hello leo

let a = document.getElementById("id1");
let b = document.getElementById("id2");
a.removeChild(b);

Window 對(duì)象表示瀏覽器中打開(kāi)的窗口。
Window 對(duì)象涉及到的屬性和方法非常多，具體可以查看 Window 對(duì)象 比較詳細(xì)。
這里一個(gè)簡(jiǎn)單的例子，實(shí)現(xiàn)獲取視窗（顯示文檔的內(nèi)部窗口）的寬高，并設(shè)置給指定的Div元素，并且當(dāng)我們調(diào)整窗口時(shí)候，也會(huì)及時(shí)改變Div的寬高。

let div = document.querySelector("div");
// 獲取寬高
let w = window.innerWidth;
let h = window.innerHeight;
// 設(shè)置寬高
div.style.width = w + "px";
div.style.heitgh = h + "px";
// 設(shè)置及時(shí)調(diào)整div寬高
window.onresize = function(){
    w = window.innerWidth;
    h = window.innerHeight;
    div.style.width = w + "px";
    div.style.heitgh = h + "px";
}

這一部分主要復(fù)習(xí)Ajax（全稱(chēng)：Asynchronous JavaScript and XML）。
Ajax主要要解決的問(wèn)題是：避免重復(fù)加載刷新整個(gè)頁(yè)面，因?yàn)橛袝r(shí)候我們只是小部分?jǐn)?shù)據(jù)更新，這時(shí)候我們這要刷新這部分的數(shù)據(jù)，而不是整個(gè)頁(yè)面。
Ajax不是新的編程語(yǔ)言，而是一種使用現(xiàn)有標(biāo)準(zhǔn)的新方法。

下面看一下Ajax模型圖：

Ajax模型包括使用Web API作為代理來(lái)更智能地請(qǐng)求數(shù)據(jù)，而不僅僅是讓瀏覽器重新加載整個(gè)頁(yè)面。讓我們來(lái)思考這個(gè)意義：
比如：我們逛淘寶，搜索或打開(kāi)商品頁(yè)面時(shí)，頂部導(dǎo)航來(lái)和頁(yè)眉頁(yè)腳等，都保持不變。
這樣做的好處：

頁(yè)面更新更快，減少等待刷新，體驗(yàn)更好，響應(yīng)更快。

下載的數(shù)據(jù)更少，減少帶寬的浪費(fèi)。

另外為了提高加載速度，網(wǎng)站有時(shí)候也會(huì)將首次請(qǐng)求和數(shù)據(jù)存儲(chǔ)在用戶(hù)計(jì)算機(jī)中，下次再請(qǐng)求就直接先使用本地版本，如果內(nèi)容有更新才會(huì)去服務(wù)器獲取新數(shù)據(jù)，原理圖：

XMLHttpRequest 是 AJAX 的基礎(chǔ)。
所有現(xiàn)代瀏覽器均支持 XMLHttpRequest 對(duì)象（IE5 和 IE6 使用 ActiveXObject）。

創(chuàng)建 XMLHttpRequest 對(duì)象的語(yǔ)法：

variable=new XMLHttpRequest();
// IE5 和 IE使用 ActiveX 對(duì)象：
variable=new ActiveXObject("Microsoft.XMLHTTP");

為了兼容所有瀏覽器（包括IE5 IE6），我們就必須檢查瀏覽器是否支持XMLHttpRequest對(duì)象，若支持則創(chuàng)建XMLHttpRequest對(duì)象，否則創(chuàng)建ActiveXObject對(duì)象。

let my_http;
if (window.XMLHttpRequest){
    // 非 ES5 ES6
    my_http=new XMLHttpRequest();
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
        // 網(wǎng)絡(luò)請(qǐng)求成功后，執(zhí)行的操作
    }
  }
}else{
    // ES5 ES6
    my_http=new ActiveXObject("Microsoft.XMLHTTP");
}

向服務(wù)器發(fā)送請(qǐng)求時(shí)，我們可以使用 XMLHttpRequest 對(duì)象的 open() 和 send() 方法：

my_http.open(method,url,async);  
my_http.send(string);

參數(shù)解釋?zhuān)?
open(method,url,async)方法接收三個(gè)參數(shù)：

method：請(qǐng)求的類(lèi)型；GET 或 POST。

url：文件在服務(wù)器上的位置。

async：true（異步）或 false（同步）。

send(string)方法接收一個(gè)參數(shù)：

string：僅用于 POST 請(qǐng)求。

例子：

// GET
my_http.open("GET","http://www.baidu.com",true);
my_http.send();

// POST
my_http.open("POST","http://www.baidu.com",true);
my_http.setRequestHeader(
    "Content-type",
    "application/x-www-form-urlencoded"
);  // 添加 HTTP 頭
my_http.send("name=leo");

如果POST請(qǐng)求的話(huà)需要設(shè)置HTTP頭：

setRequestHeader(header,value)

參數(shù)解釋?zhuān)?
setRequestHeader(header,value)方法接收兩個(gè)參數(shù)：

header: 規(guī)定頭的名稱(chēng)。

value: 規(guī)定頭的值。

接收服務(wù)器響應(yīng)，我們可以使用 XMLHttpRequest 對(duì)象的 responseText 或 responseXML 屬性。

responseText：獲得字符串形式的響應(yīng)數(shù)據(jù)。

responseXML：獲得 XML 形式的響應(yīng)數(shù)據(jù)。

responseText屬性

當(dāng)服務(wù)端的響應(yīng)不是XML，使用responseText屬性。
若是字符串的響應(yīng)就可以直接使用。

document.getElementById("id1").inndeHTML = my_http.responseText;

readyState保存著XMLHttpRequest對(duì)象的狀態(tài)。
我們發(fā)送Ajax請(qǐng)求的整個(gè)過(guò)程中，XMLHttpRequest對(duì)象的readyState會(huì)改變，當(dāng)readyState改變的時(shí)候會(huì)觸發(fā)onreadystatechange事件。

XMLHttpRequest對(duì)象的三個(gè)重要屬性：

通常我們會(huì)在readyState等于4且status等于200時(shí)候表示響應(yīng)已就緒，可以執(zhí)行業(yè)務(wù)操作：

if (xmlhttp.readyState==4 && xmlhttp.status==200){
    // 網(wǎng)絡(luò)請(qǐng)求成功后，執(zhí)行的操作
}

這里主要介紹的是HTML5新增的canvas元素，JavaScript為canvas添加了很多API，進(jìn)一步增強(qiáng)canvas。
canvas 元素可以通過(guò)JavaScript腳本，在網(wǎng)頁(yè)上繪制圖形。
比如,它可以被用來(lái)繪制圖形,制作圖片集合,甚至用來(lái)實(shí)現(xiàn)動(dòng)畫(huà)效果。你可以(也應(yīng)該)在元素標(biāo)簽內(nèi)寫(xiě)入可提供替代的的代碼內(nèi)容，這些內(nèi)容將會(huì)在在舊的、不支持canvas元素的瀏覽器或是禁用了JavaScript的瀏覽器內(nèi)渲染并展現(xiàn)。

詳細(xì)完整的課程推薦：

MDN Canvas教程

W3C HTML5 Canvas

下面復(fù)習(xí)一下canvas的一個(gè)使用流程：

創(chuàng)建畫(huà)布，規(guī)定元素id、寬度和高度

要在網(wǎng)頁(yè)中創(chuàng)建 2D 或者 3D 場(chǎng)景，必須在 HTML 文件中插入一個(gè)canvas元素，以界定網(wǎng)頁(yè)中的繪圖區(qū)域。

    臥槽你的瀏覽器竟然不支持 canvas！

在canvas標(biāo)簽內(nèi)，寫(xiě)一些瀏覽器不支持畫(huà)布功能時(shí)候的提示內(nèi)容。
畫(huà)布默認(rèn)尺寸為 300 × 150 像素。

獲取畫(huà)布上下文，并完成設(shè)置

我們需要獲得一個(gè)對(duì)繪畫(huà)區(qū)域的特殊的引用（稱(chēng)為“上下文”）用來(lái)在畫(huà)布上繪圖?？赏ㄟ^(guò) HTMLCanvasElement.getContext() 方法獲得基礎(chǔ)的繪畫(huà)功能，需要提供一個(gè)字符串參數(shù)來(lái)表示所需上下文的類(lèi)型。
下面創(chuàng)建一個(gè)2d畫(huà)布：

let ctx = canvas.getContext("2d");

ctx 變量包含一個(gè) CanvasRenderingContext2D 對(duì)象，畫(huà)布上所有繪畫(huà)操作都會(huì)涉及到這個(gè)對(duì)象。
下面將畫(huà)布背景涂黑：

ctx.fillStyle = "rgb(0, 0, 0)";
ctx.fillRect(0, 0, 200, 100);

首先需要知道一些2D畫(huà)布的知識(shí)，畫(huà)布左上角的坐標(biāo)是(0, 0)，橫坐標(biāo)（x）軸向右延伸，縱坐標(biāo)（y）軸向下延伸。

繪制實(shí)線(xiàn)

ctx.lineTo(100,50);  // 繪制目標(biāo)坐標(biāo)
ctx.lineWidth = 5;   // 線(xiàn)條寬度
ctx.stroke();  // 繪制實(shí)線(xiàn)

繪制矩形

fillRect(x, y, width, height) 繪制一個(gè)填充的矩形
strokeRect(x, y, width, height) 繪制一個(gè)矩形的邊框
clearRect(x, y, width, height) 清除指定矩形區(qū)域，讓清除部分完全透明。
x與y指定了在canvas畫(huà)布上所繪制的矩形的左上角（相對(duì)于原點(diǎn)）的坐標(biāo)。
width和height設(shè)置矩形的尺寸。

// 實(shí)心矩形
ctx.fillStyle = "rgb(255, 0, 0)"; // 矩形顏色
ctx.fillRect(50, 50, 100, 150);   // 矩形起止坐標(biāo)

// 空心矩形
ctx.strokeStyle = "rgb(255, 255, 255)";// 矩形邊框顏色
ctx.strokeRect(25, 25, 175, 200);// 矩形起止坐標(biāo)

繪制路徑

可以通過(guò)路徑來(lái)實(shí)現(xiàn)復(fù)雜的圖形，下面整理了一些常用到的方法：

beginPath()：在畫(huà)筆當(dāng)前所在位置開(kāi)始繪制一條路徑。在新的畫(huà)布中，畫(huà)筆起始位置為 (0, 0)。

moveTo()：將畫(huà)筆移動(dòng)至另一個(gè)坐標(biāo)點(diǎn)，不記錄、不留痕跡，只將畫(huà)筆“跳”至新位置。

fill()：通過(guò)為當(dāng)前所繪制路徑的區(qū)域填充顏色來(lái)繪制一個(gè)新的填充形狀。

stroke()：通過(guò)為當(dāng)前繪制路徑的區(qū)域描邊，來(lái)繪制一個(gè)只有邊框的形狀。

路徑也可和矩形一樣使用 lineWidth 和 fillStyle / strokeStyle 等功能。

ctx.fillStyle = "rgb(255, 0, 0)"; // 設(shè)置填充顏色
ctx.beginPath();      // 開(kāi)始
ctx.moveTo(50, 50);   // 移動(dòng)到結(jié)束點(diǎn)的坐標(biāo)
// .. 可以在到處移動(dòng)
ctx.fill();           // 繪制

繪制圓形

arc(x, y, radius, startAngle, endAngle, anticlockwise)
畫(huà)一個(gè)以（x,y）為圓心的以radius為半徑的圓弧（圓），從startAngle開(kāi)始到endAngle結(jié)束，按照anticlockwise給定的方向（默認(rèn)為順時(shí)針）來(lái)生成。
arcTo(x1, y1, x2, y2, radius)
根據(jù)給定的控制點(diǎn)和半徑畫(huà)一段圓弧，再以直線(xiàn)連接兩個(gè)控制點(diǎn)。

arc方法，該方法有六個(gè)參數(shù)：

x,y為繪制圓弧所在圓上的圓心坐標(biāo)。

radius為半徑。

startAngle以及endAngle參數(shù)用弧度定義了開(kāi)始以及結(jié)束的弧度。

anticlockwise是布爾值，為true時(shí)，是逆時(shí)針?lè)较?，否則順時(shí)針?lè)较颉?/p>

這些都是以x軸為基準(zhǔn)。

注意：arc()函數(shù)中表示角的單位是弧度，不是角度。角度與弧度的js表達(dá)式:
弧度=(Math.PI/180)*角度。

cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

繪制文本

fillText(text, x, y [, maxWidth])
在指定的(x,y)位置填充指定的文本，繪制的最大寬度是可選的.
strokeText(text, x, y [, maxWidth])
在指定的(x,y)位置繪制文本邊框，繪制的最大寬度是可選的.

ctx.strokeStyle = "white";
ctx.lineWidth = 1;
ctx.font = "36px arial";
ctx.strokeText("hello leo !", 50, 50);

ctx.fillStyle = "red";
ctx.font = "48px georgia";
ctx.fillText("hello leo !", 50, 150);

另外還有一些有樣式的文本，可以使用這些屬性：

font = value

當(dāng)前繪制的文本字體.默認(rèn)是 10px sans-serif。

textAlign = value

文本對(duì)齊選項(xiàng). 可選的值包括：start, end, left, right or center. 默認(rèn)值是 start。

textBaseline = value

基線(xiàn)對(duì)齊選項(xiàng). 可選的值包括：top, hanging, middle, alphabetic, ideographic, bottom。默認(rèn)值是 alphabetic。

direction = value

文本方向?？赡艿闹蛋ǎ?b>ltr, rtl, inherit。默認(rèn)值是 inherit。

ctx.font = "48px serif";
ctx.textBaseline = "hanging";
ctx.strokeText("Hello leo ", 0, 100);

繪制圖片

drawImage(image, x, y)

其中 image 是 image 或者 canvas 對(duì)象，x 和 y 是其在目標(biāo) canvas 里的起始坐標(biāo)。

let img = new Image();
img.src = "leo.png";
img.onload = function(){
    ctx.drawImage(img, 50, 50);
};

drawImage方法還有更多參數(shù)：

ctx.drawImage(image, 20, 20, 185, 175, 50, 50, 185, 175);

第一個(gè)參數(shù)不變，為圖片引用。

參數(shù) 2、3 表示裁切部分左上頂點(diǎn)的坐標(biāo)，參考原點(diǎn)為原圖片本身左上角的坐標(biāo)。原圖片在該坐標(biāo)左、上的部分均不會(huì)繪制出來(lái)。

參數(shù) 4、5 表示裁切部分的長(zhǎng)、寬。

參數(shù) 6、7 表示裁切部分左上頂點(diǎn)在畫(huà)布中的位置坐標(biāo)，參考原點(diǎn)為畫(huà)布左上頂點(diǎn)。

參數(shù) 8、9 表示裁切部分在畫(huà)布中繪制的長(zhǎng)、寬。本例中繪制時(shí)與裁切時(shí)面積相同，你也可以定制繪制的尺寸。

詳細(xì)完整的課程推薦：

MDN Canvas教程

W3C HTML5 Canvas

HTML5提供了用于文檔中嵌入富媒體的元素和標(biāo)簽，通過(guò)元素自帶的API來(lái)控制視頻和音頻的播放搜索等。

當(dāng)前，video 元素支持三種視頻格式：Ogg/MPEG4和WebM。
簡(jiǎn)單使用：

連接不同視頻：

之間插入的內(nèi)容是供不支持 video 元素的瀏覽器顯示的。
標(biāo)簽的屬性：

另外我們可以為視頻創(chuàng)建簡(jiǎn)單的播放/暫停和調(diào)整尺寸的控件，這里需要使用play()和 pause() 還有兩個(gè)屬性：paused 和 width。
更多方法可以查看 HTML5 video - 方法、屬性以及事件

audio 元素能夠播放聲音文件或者音頻流。
當(dāng)前，audio 元素支持三種視頻格式：Ogg Vorbis/MP3和Wav。
簡(jiǎn)單使用：

control 屬性供添加播放、暫停和音量控件。
之間插入的內(nèi)容是供不支持 audio 元素的瀏覽器顯示的。
連接不同音頻：

標(biāo)簽的屬性：

現(xiàn)代web瀏覽器會(huì)提供一些在客戶(hù)端存儲(chǔ)用戶(hù)數(shù)據(jù)的方法，只要用戶(hù)允許，可以隨時(shí)取出使用。
使用客戶(hù)端存儲(chǔ)API可以存儲(chǔ)的數(shù)據(jù)量是優(yōu)先的，具體取決于瀏覽器或者用戶(hù)設(shè)置 。
存儲(chǔ)的方式可以這樣分類(lèi)：

傳統(tǒng)方法：cookies

cookie使用比較久了，過(guò)時(shí)，存在各種安全問(wèn)題，而且無(wú)法存儲(chǔ)復(fù)雜數(shù)據(jù)，可能唯一的優(yōu)勢(shì)就是對(duì)非常老舊瀏覽器支持，如果業(yè)務(wù)需要，也可以使用cookie

新流派：Web Storage 和 IndexedDB

現(xiàn)代瀏覽器所提供的更加簡(jiǎn)單有效的客戶(hù)端儲(chǔ)存API。

未來(lái)：Cache API

一些現(xiàn)代瀏覽器支持新的 Cache API。這個(gè)API是為存儲(chǔ)特定HTTP請(qǐng)求的響應(yīng)文件而設(shè)計(jì)的，它對(duì)于像存儲(chǔ)離線(xiàn)網(wǎng)站文件這樣的事情非常有用，這樣網(wǎng)站就可以在沒(méi)有網(wǎng)絡(luò)連接的情況下使用。緩存通常與 Service Worker API 組合使用，盡管不一定非要這么做。

web storageAPI只需存儲(chǔ)簡(jiǎn)單的 鍵/值對(duì)的數(shù)據(jù)（限制為字符串、數(shù)字等類(lèi)型），并在需要的時(shí)候檢索其值。
web storageAPI提供了兩種在客戶(hù)端存儲(chǔ)數(shù)據(jù)的新方法：

localStorage : 一直保存數(shù)據(jù)，甚至到瀏覽器關(guān)閉又開(kāi)啟后也是這樣

sessionStorage : 只要瀏覽器開(kāi)著，數(shù)據(jù)就會(huì)一直保存 (關(guān)閉瀏覽器時(shí)數(shù)據(jù)會(huì)丟失)

localStorage方法：

localStorage.setItem(key, value)：存儲(chǔ)一個(gè)數(shù)據(jù)。

localStorage.getItem(key)：讀取一個(gè)數(shù)據(jù)。

localStorage.removeItem(key)：刪除一個(gè)數(shù)據(jù)。

localStorage.setItem("name","leo");
let leo = localStorage.getItem("name");
leo ; // "leo"
localStorage.removeItem("name");

關(guān)閉瀏覽器以后數(shù)據(jù)還在。

sessionStorage方法：

sessionStorage.setItem(key, value)：存儲(chǔ)一個(gè)數(shù)據(jù)。

sessionStorage.getItem(key)：讀取一個(gè)數(shù)據(jù)。

sessionStorage.removeItem(key)：刪除一個(gè)數(shù)據(jù)。

sessionStorage.setItem("name","leo");
let leo = sessionStorage.getItem("name");
leo ; // "leo"
sessionStorage.removeItem("name");

關(guān)閉瀏覽器以后數(shù)據(jù)不在。

并不是所有的API都是內(nèi)置在瀏覽器中，有一些可能是其他網(wǎng)站（如谷歌，F(xiàn)acebook等）提供的API，讓開(kāi)發(fā)者調(diào)用，從而使用他們的服務(wù)和數(shù)據(jù)等。

API通過(guò)使用一個(gè)或多個(gè)JavaScript對(duì)象與我們的代碼交互，這些對(duì)象作為API使用的數(shù)據(jù)（包含在對(duì)象屬性中）的容器，和API提供的功能（包含在對(duì)象的方法中）。
例如我們調(diào)用谷歌地圖的Google Maps APIs ，需要先引入他們開(kāi)放的JavaScript庫(kù)。

然后就可以這么使用：

navigator.geolocation.getCurrentPosition(function(options){
    // ... do something
});

如Geolocation API則是由以下幾個(gè)對(duì)象組成：

Geolocation, 包含三種控制地理數(shù)據(jù)檢索的方法。

Position, 表示在給定的時(shí)間的相關(guān)設(shè)備的位置。它包含一個(gè)當(dāng)前位置的Coordinates 對(duì)象。還包含了一個(gè)時(shí)間戳,這個(gè)時(shí)間戳表示獲取到位置的時(shí)間。

Coordinates,包含有關(guān)設(shè)備位置的大量有用數(shù)據(jù)，包括經(jīng)緯度，高度，運(yùn)動(dòng)速度和運(yùn)動(dòng)方向等。

MDN JavaScript指南

W3school JavaScript

本部分內(nèi)容到這結(jié)束

歡迎關(guān)注微信公眾號(hào)【前端自習(xí)課】每天早晨，與您一起學(xué)習(xí)一篇優(yōu)秀的前端技術(shù)博文 .