HTML5Canvas開發(fā)詳解（第二版）目錄\h第1章HTML5Canvas簡介\h1.1什么是HTML5\h1.2基礎(chǔ)的HTML5頁面\h1.2.1<!doctypehtml>\h1.2.2<htmllang="en">\h1.2.3<metacharset="UTF-8">\h1.2.4<title>…</title>\h1.2.5一個簡單的HTML5頁面\h1.3本書使用的基礎(chǔ)HTML頁面\h1.3.1<div>\h1.3.2<canvas>\h1.4文檔對象模型（DOM）和Canvas\h1.5JavaScript和Canvas\hJavaScript放置的位置及其理由\h1.6HTML5Canvas版“HelloWorld！”\h1.6.1為Canvas封裝JavaScript代碼\h1.6.2將Canvas添加到HTML頁面中\(zhòng)h1.6.3檢測瀏覽器是否支持Canvas\h1.6.4獲得2D環(huán)境\h1.6.5drawScreen()函數(shù)\h1.7用console.log調(diào)試\h1.82D環(huán)境及其當(dāng)前狀態(tài)\h1.9HTML5Canvas對象\h1.10第二個示例：猜字母\h1.10.1游戲如何工作\h1.10.2“猜字母”游戲的變量\h1.10.3initGame()函數(shù)\h1.10.4eventKeyPressed()函數(shù)\h1.10.5drawScreen()函數(shù)\h1.10.6導(dǎo)出Canvas到圖像\h1.10.7最終的游戲代碼\h1.11動畫版本的HelloWorld\h1.11.1一些必要的屬性\h1.11.2動畫循環(huán)\h1.11.3使用globalAlpha屬性設(shè)置alpha透明度\h1.11.4清除并顯示背景\h1.11.5更新globalAlpha屬性\h1.11.6繪制文字\h1.11.7HTML5Canvas實(shí)現(xiàn)無障礙訪問：子dom\h1.12內(nèi)容預(yù)告\h第2章在Canvas上繪圖\h2.1本章基本文件設(shè)置\h2.2基本矩形\h2.3Canvas狀態(tài)\h2.3.1什么不屬于狀態(tài)\h2.3.2如何保存和恢復(fù)Canvas狀態(tài)\h2.4使用路徑創(chuàng)建線段\h2.4.1設(shè)置路徑的開始和結(jié)束\h2.4.2動態(tài)繪圖\h2.4.3高級線段繪制舉例\h2.5高級路徑方法\h2.5.1弧線\h2.5.2貝塞爾曲線\h2.5.3Canvas裁切區(qū)域\h2.6在畫布上合成\h2.7簡單畫布變換\h2.7.1旋轉(zhuǎn)和平移變換\h2.7.2縮放變換\h2.7.3縮放和旋轉(zhuǎn)組合變換\h2.8用顏色和漸變填充對象\h2.8.1基本填充顏色設(shè)置\h2.8.2填充漸變形狀\h2.9用圖案填充形狀\h2.10創(chuàng)建陰影\h2.11清除畫布的方法\h2.11.1簡單填充\h2.11.2重置畫布的寬和高\(yùn)h2.11.3重新設(shè)置畫布的clearRect函數(shù)\h2.12檢查一個點(diǎn)是否在當(dāng)前路徑\h2.13繪制一個焦點(diǎn)環(huán)\h2.14內(nèi)容預(yù)告\h第3章HTML5Canvas的文本API\h3.1顯示基本文本\h3.1.1基本文本顯示\h3.1.2在TextArranger中處理基本文本\h3.1.3HTML表單和畫布之間的通信\h3.1.4使用measureText\h3.1.5fillText和strokeText\h3.2設(shè)置文本字體\h3.2.1字體大小、磅重和樣式基礎(chǔ)\h3.2.2在文本編輯器中處理字體大小和外觀\h3.2.3字體顏色\h3.2.4字體基線和對齊\h3.2.5TextArranger2.0版\h3.3文本和Canvas上下文\h3.3.1全局alpha和文本\h3.3.2全局陰影和文本\h3.4文本漸變和圖案\h3.4.1文本線性漸變\h3.4.2文本徑向漸變\h3.4.3文本圖像圖案\h3.4.4在TextArranger中處理漸變和圖案\h3.5寬度、高度、縮放和toDataURL()回顧\h3.5.1動態(tài)調(diào)整畫布尺寸\h3.5.2動態(tài)縮放畫布\h3.5.3Canvas對象的toDataURL()方法\h3.6最終版的TextArranger\h3.7漸變動畫\h3.8Canvas里文本的未來\h3.8.1CSS文本\h3.8.2文本的無障礙訪問\h3.9內(nèi)容預(yù)告\h第4章Canvas圖像\h4.1本章的基本文件設(shè)置\h4.2圖像基礎(chǔ)\h4.2.1預(yù)下載圖像\h4.2.2使用drawImage()函數(shù)在畫布上顯示圖像\h4.2.3調(diào)整畫布上圖像的大小\h4.2.4將部分圖像復(fù)制到畫布\h4.3簡單的幀式動畫\h4.3.1創(chuàng)建動畫幀計(jì)數(shù)器\h4.3.2創(chuàng)建一個計(jì)時循環(huán)\h4.3.3改變拼板顯示\h4.4高級幀式動畫\h4.4.1檢查拼圖\h4.4.2創(chuàng)建動畫數(shù)組\h4.4.3選擇拼板顯示\h4.4.4在拼板中循環(huán)\h4.4.5繪制拼板\h4.4.6在整個畫布上移動圖像\h4.5在圖像上應(yīng)用旋轉(zhuǎn)變換\h4.5.1畫布變換基礎(chǔ)\h4.5.2為變換的圖像設(shè)置動畫\h4.6創(chuàng)建一個拼板網(wǎng)格\h4.6.1定義拼板地圖\h4.6.2用Tiled創(chuàng)建拼板地圖\h4.6.3在畫布上顯示地圖\h4.7通過大圖片深入了解繪圖屬性\h4.7.1為圖像創(chuàng)建一個窗口\h4.7.2繪制圖像窗口\h4.7.3修改圖片容器的屬性\h4.7.4縮放圖像\h4.7.5平移圖片\h4.7.6同時對圖片進(jìn)行移動和縮放\h4.8像素操作\h4.8.1操作畫布像素的API\h4.8.2應(yīng)用程序拼板印章\h4.9畫布間的復(fù)制\h4.10使用像素檢測物體碰撞\h4.10.1碰撞的對象\h4.10.2如何檢測物體碰撞\h4.10.3檢查兩個物體的重疊部分\h4.11內(nèi)容預(yù)告\h第5章數(shù)學(xué)、物理與動畫\h5.1直線移動\h5.1.1兩點(diǎn)間移動：線段距離\h5.1.2按照矢量移動\h5.2撞墻反彈\h5.2.1單個球反彈\h5.2.2多球撞墻反彈\h5.2.3可動態(tài)調(diào)整畫布大小的多球碰撞反彈\h5.2.4多球反彈和碰撞\h5.2.5有摩擦力的多球碰撞反彈\h5.3曲線和圓弧運(yùn)動\h5.3.1勻速圓周運(yùn)動\h5.3.2簡單螺旋運(yùn)動\h5.3.33次貝賽爾曲線運(yùn)動\h5.3.4移動圖像\h5.3.5創(chuàng)建立方貝塞爾曲線環(huán)\h5.4簡單重力、彈力及摩擦力\h5.4.1簡單重力\h5.4.2帶反彈的簡單重力\h5.4.3重力反彈及應(yīng)用簡單彈力\h5.4.4簡單重力、彈力及摩擦力的綜合\h5.5緩沖\h5.5.1緩沖結(jié)束（飛船著陸）\h5.5.2緩沖開始（起飛）\h5.6Box2D和畫布\h5.6.1下載Box2dWeb\h5.6.2Box2D的工作原理\h5.6.3Box2D的HelloWorld\h5.6.4引入框架庫\h5.6.5創(chuàng)建Box2dWeb世界\h5.6.6Box2dWeb中的單位\h5.6.7在Box2D中定義墻\h5.6.8創(chuàng)建小球\h5.6.9b2debugDraw渲染與Canvas渲染的對比\h5.6.10drawScreen()函數(shù)\h5.6.11重溫反彈球\h5.6.12轉(zhuǎn)換為Canvas\h5.7與Box2D交互\h5.7.1創(chuàng)建箱子\h5.7.2渲染箱子\h5.7.3增加互動效果\h5.7.4創(chuàng)建箱子\h5.7.5處理小球\h5.8關(guān)于Box2D的更多內(nèi)容\h5.9內(nèi)容預(yù)告\h第6章在畫布中融合HTML5視頻\h6.1HTML5中對視頻的支持\h6.1.1Theora+Vorbis=.ogg\h6.1.2H.264+$$$=.mp4\h6.1.3VP8+Vorbis=.webm\h6.1.4結(jié)合3種視頻格式\h6.2轉(zhuǎn)換視頻格式\h6.3HTML5視頻的基本實(shí)現(xiàn)方法\h6.3.1普通的視頻嵌入方法\h6.3.2添加視頻控制器并設(shè)置播放方式\h6.3.3調(diào)整視頻的寬度和高度\h6.4使用JavaScript預(yù)加載視頻\h6.5視頻與畫布\h6.5.1在HTML5Canvas上顯示視頻\h6.5.2HTML5的視頻屬性\h6.6在畫布上使用視頻的示例\h6.6.1使用currentTime屬性創(chuàng)建視頻事件\h6.6.2在畫布上旋轉(zhuǎn)視頻\h6.6.3在畫布上制作視頻拼圖\h6.6.4在畫布上創(chuàng)建視頻控制器\h6.7回顧動畫效果之移動視頻\h6.8使用JavaScript錄制視頻\h6.8.1網(wǎng)絡(luò)RTC多媒體捕捉接口及數(shù)據(jù)流接口\h6.8.2例1：播放視頻\h6.8.3例2：在Canvas上播放視頻并截圖\h6.8.4例3：創(chuàng)建視頻拼圖\h6.9移動端HTML5視頻的支持狀況\h6.10內(nèi)容預(yù)告\h第7章使用音頻\h7.1<audio>標(biāo)簽\h7.2音頻格式\h7.2.1支持的音頻格式\h7.2.2音頻轉(zhuǎn)換工具Audacity\h7.2.3示例：使用所有3種音頻格式\h7.3Audio標(biāo)簽的屬性、函數(shù)和事件\h7.3.1音頻函數(shù)\h7.3.2重要的音頻屬性\h7.3.3重要的音頻事件\h7.3.4加載并播放音頻\h7.3.5在畫布上顯示屬性信息\h7.4不使用Audio標(biāo)簽播放聲音\h7.4.1使用JavaScript動態(tài)創(chuàng)建audio元素\h7.4.2查找支持的音頻格式\h7.4.3播放聲音\h7.4.4不使用標(biāo)簽\h7.5創(chuàng)建畫布音頻播放器\h7.5.1在Canvas中創(chuàng)建自定義用戶控件\h7.5.2加載按鈕資源\h7.5.3設(shè)置音頻播放器的值\h7.5.4鼠標(biāo)事件\h7.5.5滑動播放指示器\h7.5.6播放/暫停按鈕：檢測單擊并獲取位置\h7.5.7循環(huán)/不循環(huán)切換按鈕\h7.5.8單擊并拖動音量滑塊\h7.6音頻案例：太空掠奪者游戲\h7.6.1應(yīng)用程序中不同的聲音——事件聲音\h7.6.2迭代\h7.6.3太空掠奪者游戲框架\h7.6.4第一次迭代：使用單個對象播放聲音\h7.6.5第二次迭代：創(chuàng)建無限個動態(tài)聲音對象\h7.6.6第三次迭代：創(chuàng)建一個聲音池\h7.6.7第四次迭代：重用預(yù)加載的聲音\h7.7WebAudioAPI\h7.7.1什么是WebAudioAPI\h7.7.2使用WebAudioAPI開發(fā)太空掠奪者\(yùn)h7.8內(nèi)容預(yù)告\h第8章Canvas游戲（上）\h8.1為什么用HTML5開發(fā)游戲\h8.1.1Canvas與Flash比較\h8.1.2Canvas提供的新特性\h8.2游戲的基本HTML5文件\h8.3游戲的設(shè)計(jì)\h8.4游戲圖形：使用路徑繪制\h8.4.1所需的資源\h8.4.2使用路徑繪制游戲的主角\h8.5Canvas上的動畫\h8.5.1游戲定時器循環(huán)\h8.5.2玩家飛船的狀態(tài)變化\h8.6對游戲圖形應(yīng)用形狀變換\hCanvas的棧\h8.7游戲圖形變換\h8.7.1使玩家飛船繞中心旋轉(zhuǎn)\h8.7.2使用Alpha通道實(shí)現(xiàn)飛船淡入\h8.8游戲物體的物理算法和動畫\h8.8.1移動玩家飛船\h8.8.2使用鍵盤控制玩家飛船\h8.8.3設(shè)置玩家飛船的最大速度\h8.9基本游戲框架\h8.9.1游戲狀態(tài)機(jī)\h8.9.2更新/渲染的重復(fù)周期\h8.9.3幀率計(jì)數(shù)器對象原型\h8.10整合所有元素\h8.10.1GeoBlaster游戲架構(gòu)\h8.10.2GeoBlaster全局游戲變量\h8.11玩家對象\h8.12GeoBlaster游戲的算法\h8.12.1邏輯顯示對象數(shù)組\h8.12.2級別難度控制\h8.12.3關(guān)卡和游戲結(jié)束\h8.12.4獎勵玩家另外的飛船\h8.12.5應(yīng)用碰撞檢測\h8.13GeoBlasterBasic的完整源代碼\h8.14隕石對象原型\h8.15在網(wǎng)格上使用A*算法查找最短路徑\h8.15.1什么是A*算法\h8.15.2在更大的地圖上使用A*\h8.15.3可穿過對角線的A*尋路算法\h8.15.4在帶權(quán)值節(jié)點(diǎn)的地圖里使用A*尋路算法\h8.15.5帶權(quán)值及穿越對角線功能的A*尋路算法\h8.15.6讓游戲角色順著A*最短路徑移動\h8.15.7坦克斜穿過墻壁\h8.16內(nèi)容預(yù)告\h第9章Canvas游戲（下）\h9.1擴(kuò)展版的GeoBlaster\h9.1.1GeoBlaster的圖片表\h9.1.2渲染其他游戲?qū)ο骪h9.1.3添加聲音\h9.1.4用對象池管理對象實(shí)例\h9.1.5添加步長定時器\h9.2在運(yùn)行時創(chuàng)建動態(tài)的圖片表\h9.3簡單的基于區(qū)塊的游戲\h9.3.1微型坦克迷宮的介紹\h9.3.2游戲中用到的圖片表\h9.3.3游戲區(qū)域\h9.3.4玩家\h9.3.5敵人\h9.3.6目標(biāo)\h9.3.7爆炸效果\h9.3.8回合制游戲的流程和狀態(tài)機(jī)\h9.3.9簡單區(qū)塊移動邏輯概述\h9.3.10渲染邏輯概述\h9.3.11自定義簡單人工智能概述\h9.3.12微型坦克迷宮的完整游戲代碼\h9.4為基于區(qū)塊的游戲世界添加滾動效果\h9.4.1第一步：將用于繪制屏幕的區(qū)塊放在一個圖片表中\(zhòng)h9.4.2第二步：用二維數(shù)組表示游戲世界\h9.4.3第三步：將基于區(qū)塊的世界繪制在畫布上\h9.4.4粗糙滾動與精確滾動\h9.4.5camera對象\h9.4.6world對象\h9.4.7精確滾動時行和列的緩沖區(qū)\h9.4.8粗糙滾動的完整代碼示例\h9.4.9精確滾動的完整代碼示例\h9.5內(nèi)容預(yù)告\h第10章在移動設(shè)備上開發(fā)\h10.1第一個應(yīng)用程序\h10.1.1代碼\h10.1.2查看BSBingo.html的代碼\h10.1.3應(yīng)用程序代碼\h10.1.4針對瀏覽器修改游戲\h10.1.5在真實(shí)設(shè)備上測試游戲\h10.2觸屏版的RetroBlaster游戲\h10.3將觸屏版RetroBlaste