主要源于廖雪峰老師的JavaScript教程
瀏覽器
1. 簡介
注意IE瀏覽器，別的支持的都挺好续挟。
IE 6~11：國內(nèi)用得最多的IE瀏覽器，歷來對W3C標(biāo)準(zhǔn)支持差。從IE10開始支持ES6標(biāo)準(zhǔn)截酷；
另外還要注意識別各種國產(chǎn)瀏覽器，如某某安全瀏覽器乾戏，某某旋風(fēng)瀏覽器迂苛，它們只是做了一個殼，其核心調(diào)用的是IE鼓择，也有號稱同時支持IE和Webkit的“雙核”瀏覽器三幻。
不同的瀏覽器對JavaScript支持的差異主要是，有些API的接口不一樣呐能，比如AJAX念搬，F(xiàn)ile接口。對于ES6標(biāo)準(zhǔn)摆出，不同的瀏覽器對各個特性支持也不一樣锁蠕。
在編寫JavaScript的時候，就要充分考慮到瀏覽器的差異懊蒸，盡量讓同一份JavaScript代碼能運行在不同的瀏覽器中荣倾。
2. 瀏覽器對象
JavaScript可以獲取瀏覽器提供的很多對象，并進(jìn)行操作骑丸。
- window
window對象不但充當(dāng)全局作用域舌仍，而且表示瀏覽器窗口。
window對象有innerWidth和innerHeight屬性通危，可以獲取瀏覽器窗口的內(nèi)部寬度和高度铸豁。內(nèi)部寬高是指除去菜單欄、工具欄菊碟、邊框等占位元素后节芥，用于顯示網(wǎng)頁的凈寬高。
兼容性：IE<=8不支持
相對應(yīng)逆害，還有一個outerWidth和outerHeight屬性头镊，可以獲取瀏覽器窗口的整個寬高。 - navigator
navigator對象表示瀏覽器的信息魄幕，最常用的屬性包括：
navigator.appName:瀏覽器名稱
navigator.appVersion:瀏覽器版本
navigator.language:瀏覽器設(shè)置的語言
navigator.platform:操作系統(tǒng)類型
navigator.userAgent:瀏覽器設(shè)定的User-Agent字符串
請注意,navigator的信息可以很容易地被用戶修改相艇，所以JavaScript讀取的值不一定是正確的。
很多初學(xué)者為了針對不同瀏覽器編寫不同的代碼纯陨，喜歡用if判斷瀏覽器版本坛芽，例如：
var width;
if (getIEVersion(navigator.userAgent) < 9) {
width = document.body.clientWidth;
} else {
width = window.innerWidth;
}
這樣即可能判斷不準(zhǔn)確留储，也很難維護(hù)代碼。正確的方法是充分利用JavaScript對不存在屬性返回undefined的特性咙轩，直接用短路運算符||計算：
var width = window.innerWidth || document.body.clientWidth;
- screen
screen對象表示屏幕的信息获讳，常用的屬性有：
screen.width: 屏幕寬度，以像素為單位
screen.height:屏幕高度活喊，以像素為單位
screen.colorDepth:返回顏色位數(shù)丐膝，如8、16胧弛、24
- location
location對象表示當(dāng)前頁面的URL信息尤误，例如：一個完成的URL：
http://www.example.com:8080/path/index.html?a=1&b=2#TOP
可以用location.href獲取侠畔。要獲取各個部分的值：
location.protocol; // 'http'
location.host; // 'www.example.com'
location.port; // '8080'
location.pathname; // '/path/index.html'
location.search; // '?a=1&b=2'
location.hash; // 'TOP'
要加載一個新頁面结缚，可以用location.assign()。如果要重新加載當(dāng)前頁面软棺，調(diào)用location.reload()方法非常方便红竭。
- document
document對象表示當(dāng)前頁面。由于HTML在瀏覽器中以DOM形式表示為樹形結(jié)構(gòu)喘落，document對象就是整個DOM樹的根節(jié)點茵宪。
document的title屬性是從HTML文檔中的<title>xxx</title>讀取的，但是可以動態(tài)改變：
document.title = '努力學(xué)習(xí)中...'
要查找DOM樹的某個節(jié)點瘦棋，需要從document對象開始查找稀火。最常用根據(jù)ID和Tag Name。
#元數(shù)據(jù)
<dl id="drink-menu" style="border:solid 1px #ccc;padding:6px;">
<dt>摩卡</dt>
<dd>熱摩卡咖啡</dd>
<dt>酸奶</dt>
<dd>北京老酸奶</dd>
<dt>果汁</dt>
<dd>鮮榨蘋果汁</dd>
</dl>
用document對象提供的getElementById()和getElementByTagName()可以按ID獲得一個DOM節(jié)點和按Tag名稱獲得一組DOM節(jié)點：
'use strict';
var menu = document.getElementById('drink-menu');
var drinks = document.getElementByTagName('dt');
var i, s, menu, drinks;
menu = document.getElementById('drink-menu');
menu.tagName;//'DL'
drinks = document.getElementsByTagName('dt');
s = '提供的飲料有：'赌朋；
for (i=0; i<drinks.length; i++) {
s = s + drinks[i].innerHTML + ',';
}
console.log(s);
document對象還有一個cookie屬性凰狞，可以獲取當(dāng)前頁面的cookie。
Cookie是由服務(wù)器發(fā)送的
key-value標(biāo)示符沛慢。因為HTTP協(xié)議是無狀態(tài)的赡若，但是服務(wù)器要區(qū)分到底是哪個用戶發(fā)過來的請求，就可以用Cookie來區(qū)分团甲。當(dāng)一個用戶成功登錄后逾冬，服務(wù)器發(fā)送一個Cookie給瀏覽器，例如user=ABC123XYZ(加密的字符串)...躺苦，此后身腻，瀏覽器訪問該網(wǎng)站時，會在請求頭附上這個Cookie匹厘，服務(wù)器根據(jù)Cookie即可區(qū)分出用戶霸株。
Cookie還可以存儲網(wǎng)站的一些設(shè)置，例如集乔，頁面顯示的語言等等去件。
JavaScript可以通過document.cookie讀取到當(dāng)前頁面的Cookie:
document.cookie; //'v=123; remember=true; prefer=zh'
由于JavaScript能讀取到頁面的Cookie坡椒，而用戶的登錄信息通常也存在Cookie中，這就造成了巨大的安全隱患尤溜，這是因為在HTML頁面中引入第三方的JavaScript代碼是允許的：
<!-- 當(dāng)前頁面在wwwexample.com -->
<html>
<head>
<script src="http://www.foo.com/jquery.js"></script>
</head>
...
</html>
為了解決這個問題倔叼，服務(wù)器在設(shè)置Cookie時可以使用
httpOnly，設(shè)定了httpOnly的Cookie將不能被JavaScript讀取宫莱。這個行為由瀏覽器實現(xiàn)丈攒，主流瀏覽器均支持httpOnly選項，IE從IE6 SP1開始支持授霸。
為了確保安全巡验，服務(wù)器端在設(shè)置Cookie時，應(yīng)該始終堅持使用
httpOnly碘耳。
- history
history對象保存了瀏覽器的歷史記錄显设，JavaScript可以調(diào)用history對象的back()或forward()，相當(dāng)于點擊了后退或前進(jìn)辛辨。
這個對象屬于歷史遺留對象捕捂，對于現(xiàn)代Web頁面來說，由于大量使用
AJAX和頁面交互斗搞，簡單粗暴地調(diào)用history.back()可能會讓用戶感到非常憤怒指攒。新手開始設(shè)計Web頁面時喜歡在登錄頁登錄成功時調(diào)用
history.back()，試圖回到登錄前的頁面僻焚。這是一種錯誤的方法允悦。任何情況，你都不應(yīng)該使用
history這個對象了。
3. 操作DOM 簡介
由于HTML文檔被瀏覽器解析后就是一顆DOM樹，要改變HTML結(jié)構(gòu)糊肠，就需要通過JavaScript來操作DOM轻纪。
操作一個DOM節(jié)點實際上就是這么幾個操作：
- 更新：更新該DOM節(jié)點的內(nèi)容，相當(dāng)于更新了該DOM節(jié)點表示的HTML的內(nèi)容；
- 遍歷：遍歷該DOM節(jié)點下的子節(jié)點，以便進(jìn)行進(jìn)一步操作；
- 添加：在該DOM節(jié)點下新增一個子節(jié)點室埋，相當(dāng)于動態(tài)增加了一個HTML節(jié)點；
- 刪除：將該節(jié)點從HTML中刪除伊约，相當(dāng)于刪掉了該DOM節(jié)點的內(nèi)容以及它包含的所有子節(jié)點姚淆。
那么，如何拿到DOM節(jié)點呢：
#ID是唯一的
document.getElementById()
#下面這兩個都是返回一組DOM節(jié)點屡律。
document.getElementsByTagName()
#CSS的
document.getElementsByClassName()
要精確地選擇DOM腌逢，可以先定位父節(jié)點，再從父節(jié)點開始選擇超埋，以縮小范圍搏讶。例如：
// 返回ID為'test'的節(jié)點：
var test = document.getElementById('test');
// 先定位ID為'test-table'的節(jié)點佳鳖，再返回其內(nèi)部所有tr節(jié)點：
var trs = document.getElementById('test-table').getElementsByTagName('tr');
// 先定位ID為'test-div'的節(jié)點，再返回其內(nèi)部所有class包含red的節(jié)點：
var reds = document.getElementById('test-div').getElementsByClassName('red');
// 獲取節(jié)點test下的所有直屬子節(jié)點:
var cs = test.children;
//獲取節(jié)點test下第一個媒惕、最后一個子節(jié)點：
var first = test.firstElementChild;
var last = test.lastElementChild;
第二種方法是使用querySelector()和querySelectorAll()系吩，需要了解selector語法，然后使用條件獲取節(jié)點：
// 通過querySelector獲取ID為q1的節(jié)點：
var q1 = document.querySelector('#q1');
//通過querySelectorAll獲取q1節(jié)點內(nèi)的符合條件的所有節(jié)點：
var ps = q1.querySelectorAll('div.highlighted > p');
注意：低版本的IE<8不支持querySelector和querySelectorAll妒蔚。IE8僅有限支持穿挨。
嚴(yán)格地講，我們這里的DOM節(jié)點是指
Element肴盏，但是DOM節(jié)點實際上是Node科盛，在HTML中，Node包括Element菜皂、Comment贞绵、CDATA_SECTION等很多種，以及根節(jié)點Document類型幌墓，但是但壮，絕大多數(shù)時候我們只關(guān)心Element冀泻，也就是實際控制頁面結(jié)構(gòu)的Node常侣，其他類型的Node忽略即可。根節(jié)點Document已經(jīng)自動綁定為全局變量document弹渔。
- 更新DOM
拿到一個DOM節(jié)點后胳施，我們可以對它進(jìn)行更新。
可以直接修改節(jié)點的文本肢专，有兩種方法：
-1. 修改innerHTML屬性舞肆。這種方式非常強(qiáng)大，不但可以修改一個DOM節(jié)點的文本內(nèi)容博杖，還可以直接通過HTML片段修改DOM節(jié)點內(nèi)部的子樹：
//獲取<p id="p-id">...</p>
var p = document.getElementById('p-id');
//設(shè)置文本為abc:
p.innerHTML = 'ABC'; //<p id="p-id">ABC</p>
//設(shè)置HTML
p.innerHTML = ' ABC <span style="color:red">RED</span> XYZ';
// <p>...</p>的內(nèi)部結(jié)構(gòu)已修改
用innerHTML時要注意椿胯，是否需要寫入HTML。如果寫入的字符串是通過網(wǎng)絡(luò)拿到了剃根，要注意對字符編碼來避免XSS攻擊哩盲。
-2. 修改innerText或textContent屬性，這樣可以自動對字符串進(jìn)行HTML編碼狈醉，保證無法設(shè)置任何HTML標(biāo)簽：
// 獲取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 設(shè)置文本:
p.innerText = '<script>alert("Hi")</script>';
// HTML被自動編碼廉油，無法設(shè)置一個<script>節(jié)點:
// <p id="p-id"><script>alert("Hi")</script></p>
innerText不返回隱藏元素的文本，textContent返回所有文本苗傅。IE<9不支持textContent抒线。
-3. 修改CSS也是經(jīng)常需要的操作。DOM節(jié)點的style屬性對應(yīng)所有的CSS渣慕，可以直接獲取或設(shè)置嘶炭。因為CSS允許font-size這樣的名稱抱慌，但它并非JavaScript有效的屬性名，所以需要在JavaScript中改寫為駝峰式命名fontSize：
// 獲取<p id="p-id">...</p>
var p = document.getElementById('p-id');
// 設(shè)置CSS:
p.style.color = '#ff0000';
p.style.fontSize = '20px';
p.style.paddingTop = '2em';
- 插入DOM
獲得了一個DOM節(jié)點眨猎，在這個DOM節(jié)點內(nèi)插入新的DOM遥缕，如何做？
如果DOM節(jié)點是空的宵呛，例如：<div></div>单匣，可以直接使用innerHTML = '<span>child</span>'就可以修改節(jié)點，相當(dāng)于插入新的DOM節(jié)點宝穗。
如果不為空户秤，就不能這么做，因為innerHTML會替換掉原來的所有子節(jié)點逮矛。
有兩個辦法可插入新的節(jié)點鸡号。
-1. 使用appendChild,把一個子節(jié)點添加到父節(jié)點的最后一個子節(jié)點：
<!-- HTML結(jié)構(gòu) -->
<p id="js">JavaScript</p>
<div id="list">
<p id="java">Java</p>
<p id="python">Python</p>
<p id="scheme">Scheme</p>
</div>
<!-- 把<p id="js">JavaScript</p>添加到<div id="list">的最后一項：-->
var
js = document.getElementById('js'),
list = document.getElementById('list');
list.appendChild(js);
<!--插入之后新的 HTML結(jié)構(gòu) -->
<div id="list">
<p id="java">Java</p>
<p id="python">Python</p>
<p id="scheme">Scheme</p>
<p id="js">JavaScript</p>
</div>
#因為我們插入的js節(jié)點已經(jīng)存在于當(dāng)前的文檔樹，因此這個節(jié)點首先會從原先的位置刪除须鼎，再插入到新的位置鲸伴。
更多時候我們會從零創(chuàng)建一個新的節(jié)點，然后插入指定位置：
var
list = document.getElementById('list'),
haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.appendChild(haskell);
<!-- HTML結(jié)構(gòu) -->
<div id="list">
<p id="java">Java</p>
<p id="python">Python</p>
<p id="scheme">Scheme</p>
<p id="haskell">Haskell</p>
</div>
動態(tài)創(chuàng)建一個節(jié)點然后添加到DOM樹中晋控，可以實現(xiàn)很多功能汞窗。舉個例子，下面的代碼動態(tài)創(chuàng)建了一個<style>節(jié)點赡译，然后把它添加到<head>節(jié)點的末尾仲吏，這樣就動態(tài)地給文檔添加了新的CSS定義：
var d = document.createElement('style');
d.setAttribute('type', 'text/css');
d.innerHTML = 'p { color: red }';
document.getElementByTagName('head')[0].appendChild(d);
-2. insertBefore
如果我們要把子節(jié)點插入到指定的位置怎么辦？可以使用parentElement.insertBefore(newElement, referenceElement);蝌焚，子節(jié)點會插入到referenceElement之前裹唆。
<!-- HTML結(jié)構(gòu) -->
<div id="list">
<p id="java">Java</p>
<p id="python">Python</p>
<p id="scheme">Scheme</p>
</div>
var
list = document.getElementById('list'),
ref = document.getElementById('python'),
haskell = document.createElement('p');
haskell.id = 'haskell';
haskell.innerText = 'Haskell';
list.insertBefore(haskell, ref);
<!-- HTML結(jié)構(gòu) -->
<div id="list">
<p id="java">Java</p>
<p id="haskell">Haskell</p>
<p id="python">Python</p>
<p id="scheme">Scheme</p>
</div>
可見，使用insertBefore重點是要拿到一個參考子節(jié)點只洒⌒碚剩可以通過遍歷父節(jié)點的所有子節(jié)點:
var
i , c,
list = document.getElementById('list');
for (i = 0; i < list.children.length; i++) {
c = list.children[i]; //拿到第i個子節(jié)點
}
- 刪除DOM
要刪除一個節(jié)點，首先獲取該節(jié)點本身以及它的父節(jié)點毕谴，然后成畦，調(diào)用父節(jié)點的removeChild把自己刪除：
// 拿到待刪除節(jié)點:
var self = document.getElementById('to-be-removed');
// 拿到父節(jié)點:
var parent = self.parentElement;
//刪除
var removed = parent.removeChild(self);
removed === self;//true
注意到刪除后的節(jié)點雖然不在文檔樹中了，但其實它還在內(nèi)存中析珊，可以隨時再次被添加到別的位置羡鸥。
當(dāng)你遍歷一個父節(jié)點的子節(jié)點并進(jìn)行刪除操作時，要注意忠寻，children屬性是一個只讀屬性惧浴，并且它在子節(jié)點變化時會實時更新。
<div id="parent">
<p>First</p>
<p>Second</p>
</div>
var parent = document.getElementById('parent');
parent.removeChild(parent.children[0]);
parent.removeChild(parent.children[1]); // <-- 瀏覽器報錯
瀏覽器報錯：parent.children[1]不是一個有效的節(jié)點奕剃。原因在于,當(dāng)<p>First</p>節(jié)點被刪除后衷旅，parent.children的節(jié)點數(shù)量已經(jīng)從2變?yōu)?了捐腿，索引[1]已經(jīng)不存在了。因此柿顶，刪除多個節(jié)點是茄袖，要注意children屬性時刻都在變化。
4. 操作表單
用JavaScript操作表單和操作DOM類似嘁锯，因為表單本身也是DOM樹宪祥。
不過表單的輸入框、下拉框等可以接收用戶輸入家乘，所以用JavaScript來操作表單蝗羊，可以獲得用戶輸入的內(nèi)容，或者對一個輸入框設(shè)置新的內(nèi)容仁锯。
HTML表單輸入控件主要有以下幾種：
#文本框：
<input type="text">//輸入文本
#口令框：
<input type="password">//輸入口令
#單選框：
<input type="radio">//選擇一項
#復(fù)選框：
<input type="checkbox">//用于多選
#下拉框
<select>//用于選擇一項
#隱藏文本
<input type="hidden">//用戶不可見耀找，但表單提交時會把隱藏文本發(fā)送到服務(wù)器
- 獲取值
如果我們獲得了一個<input>節(jié)點的引用，就可以直接調(diào)用value獲得對應(yīng)的用戶輸入值：
//<input type="text" id="email">
var input = document.getElementById('email');
input.value; //用戶輸入值
這種方式可以應(yīng)用于text业崖、password野芒、hidden、select双炕。但是狞悲，對于單選框radio和復(fù)選框checkbox,value返回的永遠(yuǎn)是HTML預(yù)設(shè)的值，我們要獲得實際用戶是否勾選了選項雄家，應(yīng)該用checked判斷：
//<label><input type="radio" name="weekday" id="monday" value="1">Monday</label>
// <label><input type="radio" name="weekday" id="tuesday" value="2"> Tuesday</label>
var mon = document.getElementById('monday')效诅；
var tue = document.getElementById('tuesday');
mon.value; //'1'
tue.value; //'2'
mon.checked; //true或者false
tue.checked; //true或者false
- 設(shè)置值
設(shè)置值和獲取值類似胀滚，對于text趟济、password、hidden咽笼、select直接設(shè)置value就可以：
// <input type="text" id="email">
var input = document.getElementById('email');
input.value = 'test@example.com'; //文本框的內(nèi)容已更新
對于單選和復(fù)選框顷编，設(shè)置checked為true或者false即可。
- HTML5控件
H5新增了大量的標(biāo)準(zhǔn)控件剑刑，常用的包括date媳纬、datetime、datetime-local施掏、color等钮惠，它們都使用<input>標(biāo)簽:
<input type="date" value="2015-07-01">//輸入框2015-07-01
<input type="datetime-local" value="2015-07-01T02:03:04">//輸入框2015-07-01T02:03:04
<input type="color" value="#ff0000">//輸入框#ff0000
不支持H5的控件無法識別新的控件，會把它們當(dāng)做type="text"來顯示七芭。支持H5的瀏覽器將獲得格式化的字符串素挽。例如:type="date"類型的input的value將保證是一個有效的YYYY-MM-DD格式的日期，或者空字符串狸驳。
- 提交表單
最后,JavaScript可以以兩種方式來處理表單的提交(AJAX方式在后面章節(jié)介紹)预明。
方式一是通過<form>元素的submit()方法提交一個表單缩赛，例如，相應(yīng)一個<button>的click事件撰糠，在JavaScript代碼中提交表單:
<!-- HTML -->
<form id="test-form">
<input type="text" name="test">
<button type="button" onclick="doSubmitForm()">Submit</button>
</form>
<script>
function doSubmitForm() {
var form = document.getElementById('test-form');
//可以在此修改form的input...
//提交form:
form.submit();
}
</script>
這種方式的缺點是擾亂了瀏覽器對form的正常提交酥馍。瀏覽器默認(rèn)點擊<button type="submit">時提交表單，或者用戶在最后一個輸入框按回車鍵阅酪。
因此旨袒，第二種響應(yīng)<form>本身的onsubmit事件，在提交form時做修改：
<!-- HTML -->
<form id="test-form" onsubmit="return checkForm()">
<input type="text" name="test">
<button type="submit">Submit</button>
</form>
<script>
function checkForm() {
var form = document.getElementById('test-form');
// 可以在此修改form的input...
// 繼續(xù)下一步:
return true;
}
</script>
注意术辐，return true來告訴瀏覽器繼續(xù)提交峦失，如果return false，瀏覽器將不會繼續(xù)提交form,這種情況通常對應(yīng)用戶輸入有誤术吗，提示用戶錯誤信息后終止提交form.
在檢查和修改<input>時尉辑，要充分利用<input type="hidden">來傳遞數(shù)據(jù)。
例如较屿，很多登錄表單希望用戶輸入用戶名和口令隧魄。但是，安全考慮隘蝎，提交表單時不傳輸明文口令购啄，而是口令的MD5。普通JavaScript開發(fā)人員會直接修改<input>:
<!-- HTML -->
<form id="login-form" method="post" onsubmit="return checkForm()">
<input type="text" id="username" name="username">
<input type="password" id="password" name="password">
<button type="submit">Submit</button>
</form>
<script>
function checkForm() {
var pwd = document.getElementById('password');
// 把用戶輸入的明文變?yōu)镸D5:
pwd.value = toMD5(pwd.value);
// 繼續(xù)下一步:
return true;
}
</script>
這個做法看上去沒啥問題嘱么，但用戶輸入了口令提交時狮含，口令框的顯示會突然從幾個*變成32個*。
要想不改變用戶的輸入曼振，可以利用<input type="hidden">實現(xiàn)：
<!-- HTML -->
<form id="login-form" method="post" onsubmit="return checkForm()">
<input type="text" id="username" name="username">
<input type="password" id="input-password">
<input type="hidden" id="md5-password" name="password">
<button type="submit">Submit</button>
</form>
<script>
function checkForm() {
var input_pwd = document.getElementById('input-password');
var md5_pwd = document.getElementById('md5-password');
// 把用戶輸入的明文變?yōu)镸D5:
md5_pwd.value = toMD5(input_pwd.value);
// 繼續(xù)下一步:
return true;
}
</script>
注意：id為md5-password的<input>標(biāo)記了name="password",而用戶輸入的id為input-password的<input>沒有name屬性几迄。沒有name屬性的<input>的數(shù)據(jù)不會被提交。
5. 操作文件
在HTML表單中冰评，可以上傳文件的唯一控件就是<input type="file">映胁。
注意：當(dāng)一個表單包含<input type="file">時，表單的enctype必須指定為multipart/form-data,method必須指定為post甲雅，瀏覽器才能正確編碼并以multipart/form-data格式發(fā)送表單的數(shù)據(jù)解孙。
出于安全考慮，瀏覽器只允許用戶點擊<input type="file">來選擇本地文件抛人，用JavaScript對<input type="file">的value賦值是沒有任何效果的弛姜。當(dāng)用戶選擇了上傳某個文件后，JavaScript也無法獲得該文件的真實路徑妖枚。通常廷臼，上傳的文件都由后臺服務(wù)器處理，JavaScript可以在提交表單時對文件擴(kuò)展名做檢查，以防止用戶上傳無效格式的文件：
var f = document.getElementById('test-file-upload');
var filename = f.value; //'C:\fakepath\test.png'
if (!filename || !(filename.endsWith('.jpg') || filename.endsWith('.png') || filename.endsWith('.gif'))) {
alert('Can only upload image file.')
return false;
}
- File API
由于JavaScript對用戶上傳的文件操作非常有限中剩，尤其是無法讀取文件內(nèi)容忌穿，是的很多需要操作文件的網(wǎng)頁不得不用Flash這樣的三方插件來實現(xiàn)。
隨著H5的普及结啼，新增的File API允許JavaScript讀取文件內(nèi)容掠剑，獲得更多的文件信息。
H5 的File API提供了File和FileReader兩個主要對象郊愧，可以獲得文件信息并讀取文件朴译。
下面的例子演示了如何讀取用戶選取的圖片文件，并在一個<div>中預(yù)覽圖像：
var
fileInput = document.getElementById('test-image-file'),
info = document.getElementById('test-file--info'),
preview = document.getElementById('test-image-preview');
//監(jiān)聽change事件:
fileInput.addEventListener('change', function () {
//清楚背景圖片
preview.style.backgroundImage = '';
//檢查文件是否選擇
if (!fileInput.value) {
info.innerHTML = '沒有選擇文件';
return;
}
//獲取File引用
var file = fileInput.files[0];
//獲取File信息：
info.innerHTML = '文件： ' + file.name + '<br>' + '大惺籼： ' + file.size + '<br>' + '修改： ' + file.lastModifiedDate;
if(file.type !== 'image/jpeg' && file.type !== 'image/png' && file.type !== 'image/gif') {
alert('不是有效的圖片文件眠寿！');
return;
}
//讀取文件
var reader = new FileReader();
reader.onload = function(e) {
var
data = e.target.result;//'data:image/jpeg;base64,/9j/4AAQSK...(base64編碼)...'
preview.style.backgroundImage = 'url(' + data + ')';
};
//以DataURL的形式讀取文件：
reader.readAsDataURL(file);
})
上面的代碼演示了如何通過H5的File API讀取文件的內(nèi)容。以DataURL的形式讀取到的文件是一個字符串焦蘑，類似于data:image/jpeg;base64,/9j/4AAQSk...(base64編碼)...,常用于設(shè)置圖像盯拱。如果需要服務(wù)器端處理，把字符串base64,后面的字符發(fā)送給服務(wù)器并用Base64解碼就可以得到原始文件的二進(jìn)制內(nèi)容例嘱。
- 回調(diào)
上面的代碼還演示了JavaScript的一個重要特性就是單線程執(zhí)行的模式狡逢。在JavaScript中，瀏覽器的JavaScript執(zhí)行引擎在執(zhí)行JavaScript代碼時拼卵，總是以單線程模式執(zhí)行奢浑，也就是說，任何時候腋腮，JavaScript代碼都不可能同時有多余1個線程在執(zhí)行雀彼。
那么，單線程模式執(zhí)行的JavaScript即寡，如何處理多任務(wù)徊哑？？
在JavaScript中嘿悬，執(zhí)行多任務(wù)實際上都是異步回調(diào),比如上面的代碼：
reader.readAsDataURL(file);
會發(fā)起一個異步操作來讀取文件內(nèi)容实柠。因為是異步操作，所以我們在JavaScript代碼中就不知道什么時候操作結(jié)束善涨，因此需要先設(shè)置一個回調(diào)函數(shù)：
reader.onload = function(e){//當(dāng)文件讀取完成后，自動調(diào)用此函數(shù)};
當(dāng)文件讀取完成后草则，JavaScript引擎將自動調(diào)用我們設(shè)置的回調(diào)函數(shù)钢拧。執(zhí)行回調(diào)函數(shù)時，文件已經(jīng)讀取完畢炕横，所以我們可以在回調(diào)函數(shù)內(nèi)部安全地獲得文件內(nèi)容源内。
6. AJAX
AJAX不是JavaScript規(guī)范，它只是一個發(fā)明的縮寫:Asynchronous JavaScript and XML份殿，用JavaScript執(zhí)行異步網(wǎng)絡(luò)請求膜钓。
如果仔細(xì)觀察一個Form的提交嗽交，你就會發(fā)現(xiàn)，一旦用戶點擊“Submit”按鈕颂斜，表單開始提交夫壁，瀏覽器就會刷新頁面，然后在新頁面里告訴你操作是成功了還是失敗了沃疮。如果不幸由于網(wǎng)絡(luò)太慢或者其他原因盒让，就會得到一個404頁面。
這就是Web的運作原理：一次HTTP請求對應(yīng)一個頁面司蔬。
如果要讓用戶留在當(dāng)前頁面中邑茄，同時發(fā)出HTTP請求，就必須用JavaScript發(fā)送這個新的請求俊啼，即受到數(shù)據(jù)后肺缕，再用JavaScript更新頁面，這樣一來授帕，用戶就感覺自己仍然停留在當(dāng)前頁面搓谆，但是數(shù)據(jù)卻可以不斷更新。
用JavaScript寫一個完整的AJAX代碼并不復(fù)雜豪墅，但需要注意：AJAX請求是異步執(zhí)行的泉手，也就是說，要通過回調(diào)函數(shù)獲得響應(yīng)偶器。
在現(xiàn)在瀏覽器上寫AJAX主要依靠XMLHttpRequest對象：
'use strict';
function success(text) {
var textarea = document.getElementById('test-response-text');
textarea.value = text;
}
function fail(code) {
var textarea = document.getElementById('test-response-text');
textarea.value = 'Error code: ' + code;
}
//低版本IE斩萌，需要換成ActiveXObject對象來創(chuàng)建
var request;
if(window.XMLHttpRequeest) {
request = new XMLHttpRequest(); //新建XMLHttpRequest對象
} else {
request = new ActiveXObject('Microsoft.XMLHTTP');//低版本IE用這個創(chuàng)建ActiveXObject對象
}
request.onreadystatechange = function () {
//狀態(tài)發(fā)生變化時，函數(shù)被回調(diào)
if (request.readyState === 4) {
//成功完成
if (request.status === 200) {
//成功屏轰，通過responseText拿到相應(yīng)的文本：
return success(request.responseText);
} else {
//失敗颊郎，根據(jù)響應(yīng)碼判斷失敗原因：
return fail(request.status);
}
} else {
//HTTP請求還在繼續(xù)
}
}
//發(fā)送請求
request.open('GET', '/api/categories');
request.send();
alert('請求已發(fā)送，請等待響應(yīng)...');
XMLHttpRequest對象的open()方法有3個參數(shù)霎苗，第一個參數(shù)指定是GET還是POST姆吭，第二個參數(shù)指定URL 地址，第三個參數(shù)指定是否使用異步唁盏，默認(rèn)是true,所以不用寫内狸。
注意：千萬不要把第三個參數(shù)指定為false，否則瀏覽器將停止響應(yīng)厘擂，知道AJAX請求完成昆淡。如果這個請求耗時10秒，那么10秒內(nèi)你會發(fā)現(xiàn)瀏覽器處于假死狀態(tài)刽严。
最后調(diào)用send()方法才真正發(fā)送請求昂灵。GET請求不需要參數(shù)，POST請求需要把body部分以字符串或者FormData對象傳進(jìn)去。
- 安全限制
上面open中的URL使用的是相對路徑眨补。如果你把它改為http://www.sina.com.cn/,在運行管削，肯定報錯。這是因為瀏覽器的同源策略導(dǎo)致的撑螺。默認(rèn)情況下含思，JavaScript在發(fā)送AJAX請求時，URL的域名必須和當(dāng)前頁面完全一致实蓬。
完全一致的意思是茸俭，域名要相同（
www.example.com和example.com不同），協(xié)議要相同（http和https不同）安皱，端口號要相同（默認(rèn)是:80端口调鬓，它和:8080就不同）。有的瀏覽器口子松一點酌伊，允許端口不同腾窝，大多數(shù)瀏覽器都會嚴(yán)格遵守這個限制。
JavaScript如何請求外域的URL了呢居砖？
一是通過Flash插件發(fā)送HTTP請求虹脯，這種方法可以繞過瀏覽器的安全限制，但是必須安裝Flash奏候，并跟Flash交互循集。
二是通過在同源域名下架設(shè)一個代理服務(wù)器來轉(zhuǎn)發(fā)，JavaScript負(fù)責(zé)把請求發(fā)送到代理服務(wù)器：
/proxy?url=http://www.sina.com.cn
代理服務(wù)器再把結(jié)果返回蔗草，這樣就遵守了瀏覽器的同源策略咒彤。這種方式麻煩之處在于需要服務(wù)器額外做開發(fā)。
第三種方式稱為JSONP咒精，它有個限制镶柱，只能用GET請求，并且要求返回JavaScript模叙。這種方式跨域?qū)嶋H上利用了瀏覽器允許跨域引用JavaScript資源：
<html>
<head>
<script src="http://example.com/abc.js"></script>
...
</head>
<body>
...
</body>
</html>
JSONP通常以函數(shù)調(diào)用的形式返回歇拆，例如，返回JavaScript內(nèi)容如下：
foo('data');
這樣一來范咨，我們?nèi)绻陧撁嬷邢葴?zhǔn)備好了foo()函數(shù)故觅，然后給頁面動態(tài)加一個<script>節(jié)點，相當(dāng)于動態(tài)讀取外域的JavaScript資源湖蜕，最后就等著接收回調(diào)了逻卖。例如：
外域的返回如下：
refreshPrice({"0000001":{"code": "0000001", ... });
//回調(diào)函數(shù)
function refreshPrice(data) {
var p = document.getElementById('test-jsonp');
p.innerHTML = '當(dāng)前價格： ' + data['0000001'].name + ': ' + data['0000001'].price + '；' + data['1399001'].name + ': ' + data['1399001'].price;
}
//然后用`getPrice()`函數(shù)觸發(fā)：
function getPrice() {
var
js = document.createElement('script'),
head = document.getElementsByTagName('head')[0];
js.src = 'http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice';
head.appendChild(js);
}
- CORS
如果瀏覽器支持H5昭抒，可以一勞永逸的使用心得跨域策略：CORS了。
CORS全稱Cross-Origin Resource Sharing,是HTML5規(guī)范定義的如何跨域訪問資源。
Origin表示本域灭返，也就是瀏覽前當(dāng)前頁面的域盗迟。當(dāng)JavaScript向外域發(fā)起請求后，瀏覽器收到響應(yīng)后熙含，首先檢查Access-Control-Allow-Origin是否包含本域罚缕，如果是，則此次跨域請求成功怎静，如果不是邮弹，則請求失敗。
假設(shè)本域是
my.com蚓聘，外域是sina.com腌乡，只要響應(yīng)頭Access-Control-Allow-Origin為http://my.com,或者是*,本次請求就可以成功。可見夜牡，跨域是否成功与纽，取決于對方服務(wù)器是否愿意給你設(shè)置一個正確的
Access-Control-Allow-Origin,決定權(quán)在對方手中。上面這種跨域請求塘装，稱之為
簡單請求.包括GET急迂、HEAD、POST（POST的content-Type類型僅限application/x-www-form-urlencoded蹦肴、multipart/form-data和text/plain）僚碎，并且不能出現(xiàn)任何自定義頭(例如：X-Custom: 12345),通常能滿足90%需求。
CORS原理阴幌，最新瀏覽器全面支持H5勺阐。在引用外域資源時，除了JavaScript和CSS外裂七，都要驗證CORS皆看。例如，當(dāng)你引用了某個第三方CDN上的字體文件時：
/* CSS */
@font-face {
font-family: 'FontAwesome';
src: url('http://cdn.com/fonts/fontawesome.ttf') format('truetype');
}
如果該CDN服務(wù)商未正確設(shè)置Access-Control-Allow-Origin背零，那么瀏覽器無法加載字體資源腰吟。
對于PUT、DELETE以及其他類型如application/json的POST請求徙瓶，在發(fā)送AJAX請求之前毛雇，瀏覽器會先發(fā)送一個OPTIONS請求（稱為preflighted請求）到這個URL上，詢問目標(biāo)服務(wù)器是否接受：
OPTIONS /path/to/resource HTTP/1.1
Host: bar.com
Origin: http://my.com
Access-Control-Request-Method: POST
服務(wù)器必須響應(yīng)并明確指出允許的Method:
HTTP/1.1 200 OK
Access-Control-Allow-Origin: http://my.com
Access-Control-Allow-Methods: POST, GET, PUT, OPTIONS
Access-Control-Max-Age: 86400
瀏覽器確認(rèn)服務(wù)器響應(yīng)的Access-Control-Allow-Methods頭確實包含將要發(fā)送的AJAX請求的Method侦镇，才會繼續(xù)發(fā)送AJAX灵疮，否則，拋出一個錯誤壳繁。
由于以
POST震捣、PUT方式傳送JSON格式的數(shù)據(jù)在REST中很常見荔棉，所以要跨域正確處理POST和PUT請求，服務(wù)器端必須正確響應(yīng)OPTIONS請求蒿赢。
7. Promise
在JavaScript中润樱，所有代碼都是單線程執(zhí)行的。
由于這個缺陷羡棵，導(dǎo)致JavaScript的所有網(wǎng)絡(luò)操作壹若，瀏覽器事件，都必須異步執(zhí)行皂冰。異步執(zhí)行可以用回調(diào)函數(shù)實現(xiàn)：
function callback() {
console.log('Done');
}
console.log('before setTimeout()');
setTimeout(callback, 1000); //1秒后調(diào)用callback函數(shù)
console.log('after setTimeout()');
//執(zhí)行結(jié)果如下：
before setTimeout()
after setTimeout()
(等待1秒后)
Done
AJAX就是典型的異步操作店展。
request.onreadystatechange = function () {
if (request.readyState === 4) {
if (request.status === 200) {
return success(request.responseText);
} else {
return fail(request.status);
}
}
}
把回調(diào)函數(shù)success(request.responseText)和fail(request.status)寫到一個AJAX操作中很正常，但是不好看秃流，而且不利于代碼復(fù)用赂蕴。有沒有更好的寫法？比如寫成這樣：
var ajax = ajaxGet('http://....');
ajax.ifSuccess(success)
.ifFail(fail);
這種鏈?zhǔn)綄懛ǖ暮锰幵谟谔抻Γ冉y(tǒng)一執(zhí)行AJAX邏輯睡腿，不關(guān)心如何處理結(jié)果，然后根據(jù)結(jié)果是成功還是失敗峻贮，在將來某個時候調(diào)用success函數(shù)或fail函數(shù)席怪。
這種承諾將來會執(zhí)行的對象在JavaScript中稱為Promise對象。
在ES6中纤控，Promise被統(tǒng)一規(guī)范挂捻，有瀏覽器直接支持。測試是否支持：
'use strict';
new Promise(function () {});
console.log('支持Promise船万！');
先看一個Promise的簡單例子：生成一個0-2之間的隨機(jī)數(shù)刻撒，如果小于1，則等待一段時間后返回成功耿导，否則返回失斏：
function test(resolve, reject) {
var timeOut = Math.random() * 2;
log('set timeout to: ' + timeOut + ' seconds.');
setTimeout(function () {
if (timeOut < 1) {
log('call resolve()...');
resolve('200 OK');
} else {
log('call reject()...');
reject('timeout in ' + timeOut + 'seconds.');
}
},timeOut * 1000);
}
這個test()函數(shù)有兩個參數(shù)，這兩個參數(shù)都是函數(shù)舱呻，如果執(zhí)行成功醋火，我們將調(diào)用resolve('200 OK');,如果失敗，調(diào)用reject('timeout in ' + timeOut + 'seconds.');箱吕。test()函數(shù)只關(guān)心自身的邏輯芥驳，并不關(guān)心具體的resolve和reject將如何處理結(jié)果。
有了執(zhí)行函數(shù)茬高，我們就可以用一個Promise對象來執(zhí)行它兆旬，并在將來某個時刻獲得成功或失敗的結(jié)果：
var p1 = new Promise(test);
var p2 = p1.then(function (result) {
console.log('成功：' + result);
});
var p3 = p2.catch(function (reason) {
console.log('失敗：' + reason);
});
變量p1是一個Promise對象怎栽，它負(fù)責(zé)執(zhí)行test函數(shù)丽猬。由于test函數(shù)在內(nèi)部是異步執(zhí)行的宿饱，當(dāng)test函數(shù)執(zhí)行成功時，我們告訴Promise對象：
//如果成功宝鼓，執(zhí)行這個函數(shù)：
p1.then(function (result) {
console.log('成功： ' + result);
});
當(dāng)test()函數(shù)執(zhí)行失敗時刑棵，我們告訴Promise對象：
p2.catch(function (reason) {
console.log('失敯涂獭：' + reason);
});
Promise對象可以串聯(lián)起來愚铡，所以上述代碼可以簡化為：
new Promise(test).then(function (result) {
console.log('成功：' + result);
}).catch(function (reason) {
console.log('失敗：' + reason);
});
實際測試代碼胡陪，看看Promise是如何異步執(zhí)行的：
'use strict';
// 清除log:
var logging = document.getElementById('test-promise-log');
while (logging.children.length > 1) {
logging.removeChild(logging.children[logging.children.length - 1]);
}
// 輸出log到頁面:
function log(s) {
var p = document.createElement('p');
p.innerHTML = s;
logging.appendChild(p);
}
new Promise(function (resolve, reject) {
log('start new Promise...');
var timeOut = Math.random() * 2;
log('set timeout to: ' + timeOut + ' seconds.');
setTimeout(function () {
if (timeOut < 1) {
log('call resolve()...');
resolve('200 OK');
}
else {
log('call reject()...');
reject('timeout in ' + timeOut + ' seconds.');
}
}, timeOut * 1000);
}).then(function (r) {
log('Done: ' + r);
}).catch(function (reason) {
log('Failed: ' + reason);
});
Promise最大的好處是在異步執(zhí)行的流程中沥寥，把執(zhí)行代碼和處理結(jié)果的代碼清晰地分離了：
Promise可以做更多的事情，比如柠座，有若干個異步任務(wù)邑雅，需要先做任務(wù)1，如果成功后再做任務(wù)2妈经，任何任務(wù)失敗則不再繼續(xù)并執(zhí)行錯誤處理函數(shù)淮野。
要串聯(lián)執(zhí)行這樣的異步任務(wù)，不用Promise需要些一層一層的嵌套代碼吹泡。有了Promise骤星，我們只需要簡單地寫：
job1.then(job2).then(job3).catch(handleError);
其中,job1、job2和job3都是Promise對象爆哑。
下面的例子演示了如何串行執(zhí)行一系列需要異步計算獲得結(jié)果的任務(wù)：
'use strict';
var logging = document.getElementById('test-promise2-log');
while (logging.children.length > 1) {
logging.removeChild(logging.children[logging.children.length - 1]);
}
function log(s) {
var p = document.createElement('p');
p.innerHTML = s;
logging.appendChild(p);
}
// 0.5秒后返回input*input的計算結(jié)果:
function multiply(input) {
return new Promise(function (resolve, reject) {
log('calculating ' + input + ' x ' + input + '...');
setTimeout(resolve, 500, input * input);
});
}
// 0.5秒后返回input+input的計算結(jié)果:
function add(input) {
return new Promise(function (resolve, reject) {
log('calculating ' + input + ' + ' + input + '...');
setTimeout(resolve, 500, input + input);
});
}
var p = new Promise(function (resolve, reject) {
log('start new Promise...');
resolve(123);
});
p.then(multiply)
.then(add)
.then(multiply)
.then(add)
.then(function (result) {
log('Got value: ' + result);
});
//執(zhí)行結(jié)果如下：
Log:
start new Promise...
calculating 123 x 123...
calculating 15129 + 15129...
calculating 30258 x 30258...
calculating 915546564 + 915546564...
Got value: 1831093128
setTimeout可以看成一個模擬網(wǎng)絡(luò)等異步執(zhí)行的函數(shù)洞难。我們把上一節(jié)的AJAX異步執(zhí)行函數(shù)轉(zhuǎn)換為Promise對象，看看用Promise如何簡化異步處理：
'use strict';
//ajax函數(shù)將返回Promise對象：
function ajax(method, url, data) {
var request = new XMLHttpRequest();
return new Promise(function (resolve, reject) {
request.onreadystatechange = function () {
if (request.readyState === 4) {
if (request.status === 200) {
resolve(request.responseText);
} else {
reject(request.status);
}
}
};
request.open(method, url);
request.send(data);
});
}
var log = document.getElementById('test-promise-ajax-result');
var p = ajax('GET', '/api/categories');
p.then(function (text) {//如果AJAX成功揭朝，獲得響應(yīng)內(nèi)容
log.innerText = text;
}).catch(function (status) {//如果失敗队贱，獲得響應(yīng)碼
log.innerText = 'ERROR: ' + status;
});
除了串行執(zhí)行若干異步任務(wù)外，Promise還可以并行執(zhí)行異步任務(wù)潭袱。
試想一個頁面聊天系統(tǒng)柱嫌，我們需要從兩個不同的URL分別獲得用戶的個人信息和好友列表蛆楞，這兩個個任務(wù)可以并行執(zhí)行沥潭，用Promise.all()實現(xiàn)如下：
var p1 = new Promise(function (resolve, reject) {
setTimeout(resolve, 500, 'P1');
});
var p2 = new Promise(function(resolve, reject) {
setTimeout(resolve, 600, 'P2');
});
//同時執(zhí)行p1和p2， 并在它們都完成后執(zhí)行then:
Promise.all([p1, p2]).then(function(results) {
console.log(results); //獲得一個Array: ['P1', 'P2']
});
有些時候澈蟆，多個異步任務(wù)是為了容錯趟径。比如瘪吏，同時向兩個URL讀取用戶的個人信息，只需要獲得先返回的結(jié)果即可蜗巧。這種情況下可以用Promise.race()實現(xiàn)：
var p1 = new Promise(function (resolve, reject) {
setTimeout(resolve, 500, 'P1');
});
var p2 = new Promise(function (resolve, reject) {
setTimeout(resolve, 600, 'P2');
});
Promise.race([p1, p2]).then(function (result) {
console.log(result); //'P1'
});
由于p1執(zhí)行較快掌眠，Promise的then()將獲得結(jié)果P1。p2仍在繼續(xù)執(zhí)行幕屹，但執(zhí)行結(jié)果將被丟棄蓝丙。
如果我們組合使用Promise级遭，就可以把很多異步任務(wù)以并行和串行的方式組合起來執(zhí)行。
8. Canvas
Canvas是H5新增的組件渺尘，它就像一塊幕布挫鸽，可以用JavaScript在上面繪制各種圖表、動畫等鸥跟。
沒有Cavans的年代丢郊，繪圖只能借助Flash插件實現(xiàn)，頁面不得不用JavaScript和Flash進(jìn)行交互医咨。
一個Canvas定義了一個指定尺寸的矩形框枫匾，在這個范圍內(nèi)我們可以隨意繪制：
<canvas id="test-canvas" width="300" height="200"></canvas>
由于瀏覽器對H5的標(biāo)準(zhǔn)支持不一致，所以拟淮，通常在<canvas>內(nèi)部添加一些說明性的HTML代碼干茉，如果瀏覽器支持Canvas，它將忽略<canvas>內(nèi)部的HTML很泊，如果瀏覽器不支持Canvas角虫，它將顯示<canvas>內(nèi)部的HTML：
<canvas id="test-stock" width="300" height="200">
<p>Current Price: 25.51</p>
</canvas>
測試瀏覽器是否支持Cavas,用canvas.getContext來進(jìn)行測試：
var canvas = document.getElementById('test-canvas');
if (canvas.getContext) {
console.log('你的瀏覽器支持Canvas!');
} else {
console.log('你的瀏覽器不支持Canvas!');
}
getContext('2d')方法讓我們拿到一個CanvasRenderingContext2D對象，所有的繪圖操作都需要通過這個對象完成委造。
var ctx = canvas.getContext('2d');
//繪制3D呢
var gl = canvas.getContext("webgl");
- 繪制形狀
我們可以在Canvas上繪制各種形狀戳鹅。Canvas的坐標(biāo)系統(tǒng)：
Canvas的坐標(biāo)以左上角為原點，水平向右為X軸争涌，垂直向下為Y軸粉楚，以像素為單位，所以每個點都是非負(fù)整數(shù)亮垫。
CanvasRenderingContext2D對象有若干方法來繪制圖形：
'use strict';
var
canvas = document.getElementById('test-shape-canvas'),
ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, 200, 300);//擦除(0,0)位置大小為200x200的矩形模软，擦除的意思是把該區(qū)域變?yōu)橥该?ctx.fillStyle = '#dddddd';//設(shè)置顏色
ctx.fillRect(10, 10, 130, 130);//把(10, 10)位置大小為130x130的矩形涂色
//利用Path繪制復(fù)雜路徑：
var path = new Path2D();
path.arc(75, 75, 50, 0, Math.PI*2, true);
path.moveto(110, 75);
path.arc(75, 75, 35, 0, Math.PI, false);
path.moveto(65, 65);
path.arc(60, 65, 5, 0, Math.PI*2, true);
path.moveto(95, 65);
path.arc(90, 65, 5, 0, Math.PI*2, true);
ctx.strokeStyle = '#0000ff';
ctx.stroke(path);
- 繪制文本
繪制文本及時在指定的位置輸出文本，可以設(shè)置文本的字體饮潦、樣式燃异、陰影等，與CSS完全一致：
'use strict';
var
canvas = document.getElementById('test-text-canvas'),
ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = '#666666';
ctx.font = '24px Arial';
ctx.fillStyle = '#333333';
ctx.fillText('帶陰影的文字', 20, 40);
Canvas除了能繪制基本的形狀和文本继蜡，還可以實現(xiàn)動畫回俐、縮放、各種濾鏡和像素轉(zhuǎn)換等高級操作稀并。如果要實現(xiàn)非常復(fù)雜的操作仅颇，考慮一下優(yōu)化方案：
1.通過創(chuàng)建一個不可見的Canvas來繪圖，然后將最終繪制結(jié)果復(fù)制到頁面的可見Canvas中碘举；
2.盡量使用整數(shù)坐標(biāo)而不是浮點數(shù)
3.可以創(chuàng)建多個重疊的Canvas繪制不同的層忘瓦，而不是在一個Canvas中繪制非常復(fù)雜的圖；
4.背景圖片如果不變可以直接用<img>標(biāo)簽并放到最底層引颈。
