HTML5 canvas開發(fā)詳解（第2版）

第1章　HTML5 Canvas簡介　1
1．1　什么是HTML5　2
1．2　基礎(chǔ)的HTML5頁面　3　6
1．4　文檔對象模型(DOM)和Canvas　7
1．5　JavaScript和Canvas　7
JavaScript放置的位置及其理由　7
1．6　HTML5 Canvas版“Hello World！”　8
1．6．1　為Canvas封裝JavaScript代碼　9
1．6．2　將Canvas添加到HTML頁面中　10
1．6．3　檢測瀏覽器是否支持Canvas　10
1．6．4　獲得2D環(huán)境　11
1．6．5　drawScreen()函數(shù)　12
1．7　用console．log調(diào)試　15
1．8　2D環(huán)境及其當(dāng)前狀態(tài)　16
1．9　HTML5 Canvas對象　17
1．10　第二個(gè)示例：猜字母　18
1．10．1　游戲如何工作　18
1．10．2　“猜字母”游戲的變量　18
1．10．3　initGame()函數(shù)　19
1．10．4　eventKeyPressed()函數(shù)　20
1．10．5　drawScreen()函數(shù)　21
1．10．6　導(dǎo)出Canvas到圖像　23
1．10．7　最終的游戲代碼　23
1．11　動(dòng)畫版本的Hello World　23
1．11．1 一些必要的屬性　24
1．11．2　動(dòng)畫循環(huán)　25
1．11．3　使用globalAlpha屬性設(shè)置alpha透明度　26
1．11．4　清除并顯示背景　26
1．11．5　更新globalAlpha屬性　26
1．11．6　繪制文字　27
1．11．7　HTML5 Canvas實(shí)現(xiàn)無障礙訪問：子dom　29
1．12　內(nèi)容預(yù)告　31
第2章　在Canvas上繪圖　32
2．1　本章基本文件設(shè)置　32
2．2　基本矩形　33
2．3　Canvas狀態(tài)　34
2．3．1　什么不屬于狀態(tài)　35
2．3．2　如何保存和恢復(fù)Canvas狀態(tài)　35
2．4　使用路徑創(chuàng)建線段　35
2．4．1　設(shè)置路徑的開始和結(jié)束　35
2．4．2　動(dòng)態(tài)繪圖　36
2．4．3　高級線段繪制舉例　37
2．5　高級路徑方法　38
2．5．1　弧線　38
2．5．2　貝塞爾曲線　40
2．5．3　Canvas裁切區(qū)域　41
2．6　在畫布上合成　42
2．7　簡單畫布變換　45
2．7．1　旋轉(zhuǎn)和平移變換　45
2．7．2　縮放變換　50
2．7．3　縮放和旋轉(zhuǎn)組合變換　51
2．8　用顏色和漸變填充對象　53
2．8．1　基本填充顏色設(shè)置　53
2．8．2　填充漸變形狀　54
2．9　用圖案填充形狀　63
2．10　創(chuàng)建陰影　65
2．11　清除畫布的方法　67
2．11．1　簡單填充　67
2．11．2　重置畫布的寬和高　67
2．11．3　重新設(shè)置畫布的clearRect函數(shù)　67
2．12　檢查一個(gè)點(diǎn)是否在當(dāng)前路徑　68
2．13　繪制一個(gè)焦點(diǎn)環(huán)　69
2．14　內(nèi)容預(yù)告　69
第3章　HTML5 Canvas的文本API　70
3．1　顯示基本文本　70
3．1．1　基本文本顯示　71
3．1．2　在Text Arranger中處理基本文本　71
3．1．3　HTML表單和畫布之間的通信　72
3．1．4　使用measureText　72
3．1．5　fillText和strokeText　74
3．2　設(shè)置文本字體　77
3．2．1　字體大小、磅重和樣式基礎(chǔ)　77
3．2．2　在文本編輯器中處理字體大小和外觀　77
3．2．3　字體顏色　82
3．2．4　字體基線和對齊　84
3．2．5　Text Arranger 2．0版　87
3．3　文本和Canvas上下文　87
3．3．1　全局alpha和文本　87
3．3．2　全局陰影和文本　89
3．4　文本漸變和圖案　91
3．4．1　文本線性漸變　91
3．4．2　文本徑向漸變　93
3．4．3　文本圖像圖案　93
3．4．4　在Text Arranger中處理漸變和圖案　94
3．5　寬度、高度、縮放和toDataURL()回顧　97
3．5．1　動(dòng)態(tài)調(diào)整畫布尺寸　97
3．5．2　動(dòng)態(tài)縮放畫布　99
3．5．3　Canvas對象的toDataURL()方法　100
3．6　最終版的Text Arranger　102
3．7　漸變動(dòng)畫　112
3．8　Canvas里文本的未來　115
3．8．1　CSS文本　116
3．8．2　文本的無障礙訪問　116
3．9　內(nèi)容預(yù)告　116
第4章　Canvas圖像　117
4．1　本章的基本文件設(shè)置　117
4．2　圖像基礎(chǔ)　118
4．2．1　預(yù)下載圖像　119
4．2．2　使用drawImage()函數(shù)在畫布上顯示圖像　119
4．2．3　調(diào)整畫布上圖像的大小　121
4．2．4　將部分圖像復(fù)制到畫布　122
4．3　簡單的幀式動(dòng)畫　124
4．3．1　創(chuàng)建動(dòng)畫幀計(jì)數(shù)器　124
4．3．2　創(chuàng)建一個(gè)計(jì)時(shí)循環(huán)　124
4．3．3　改變拼板顯示　125
4．4　高級幀式動(dòng)畫　126
4．4．1　檢查拼圖　126
4．4．2　創(chuàng)建動(dòng)畫數(shù)組　126
4．4．3　選擇拼板顯示　127
4．4．4　在拼板中循環(huán)　127
4．4．5　繪制拼板　127
4．4．6　在整個(gè)畫布上移動(dòng)圖像　128
4．5　在圖像上應(yīng)用旋轉(zhuǎn)變換　130
4．5．1　畫布變換基礎(chǔ)　130
4．5．2　為變換的圖像設(shè)置動(dòng)畫　133
4．6　創(chuàng)建一個(gè)拼板網(wǎng)格　136
4．6．1　定義拼板地圖　136
4．6．2　用Tiled創(chuàng)建拼板地圖　136
4．6．3　在畫布上顯示地圖　138
4．7　通過大圖片深入了解繪圖屬性　141
4．7．1　為圖像創(chuàng)建一個(gè)窗口　142
4．7．2　繪制圖像窗口　142
4．7．3　修改圖片容器的屬性　143
4．7．4　縮放圖像　144
4．7．5　平移圖片　146
4．7．6　同時(shí)對圖片進(jìn)行移動(dòng)和縮放　147
4．8　像素操作　148
4．8．1　操作畫布像素的API　148
4．8．2　應(yīng)用程序拼板印章　149
4．9　畫布間的復(fù)制　156
4．10　使用像素檢測物體碰撞　158
4．10．1　碰撞的對象　159
4．10．2　如何檢測物體碰撞　160
4．10．3　檢查兩個(gè)物體的重疊部分　160
4．11　內(nèi)容預(yù)告　165
第5章　數(shù)學(xué)、物理與動(dòng)畫　166
5．1　直線移動(dòng)　166
5．1．1　兩點(diǎn)間移動(dòng)：線段距離　168
5．1．2　按照矢量移動(dòng)　173
5．2　撞墻反彈　177
5．2．1　單個(gè)球反彈　178
5．2．2　多球撞墻反彈　181
5．2．3　可動(dòng)態(tài)調(diào)整畫布大小的多球碰撞反彈　187
5．2．4　多球反彈和碰撞　191
5．2．5　有摩擦力的多球碰撞反彈　203
5．3　曲線和圓弧運(yùn)動(dòng)　210
5．3．1　勻速圓周運(yùn)動(dòng)　210
5．3．2　簡單螺旋運(yùn)動(dòng)　212
5．3．3　3次貝賽爾曲線運(yùn)動(dòng)　215
5．3．4　移動(dòng)圖像　220
5．3．5　創(chuàng)建立方貝塞爾曲線環(huán)　224
5．4　簡單重力、彈力及摩擦力　228
5．4．1　簡單重力　228
5．4．2　帶反彈的簡單重力　232
5．4．3　重力反彈及應(yīng)用簡單彈力　234
5．4．4　簡單重力、彈力及摩擦力的綜合　237
5．5　緩沖　240
5．5．1　緩沖結(jié)束(飛船著陸)　240
5．5．2　緩沖開始(起飛)　244
5．6　Box2D和畫布　247
5．6．1　下載Box2dWeb　247
5．6．2　Box2D的工作原理　248
5．6．3　Box2D的Hello World　248
5．6．4　引入框架庫　248
5．6．5　創(chuàng)建Box2dWeb世界　249
5．6．6　Box2dWeb中的單位　249
5．6．7　在Box2D中定義墻　250
5．6．8　創(chuàng)建小球　251
5．6．9　b2debugDraw渲染與Canvas渲染的對比　252
5．6．10　drawScreen()函數(shù)　252
5．6．11　重溫反彈球　255
5．6．12　轉(zhuǎn)換為Canvas　256
5．7　與Box2D交互　258
5．7．1　創(chuàng)建箱子　259
5．7．2　渲染箱子　260
5．7．3　增加互動(dòng)效果　260
5．7．4　創(chuàng)建箱子　261
5．7．5　處理小球　261
5．8　關(guān)于Box2D的更多內(nèi)容　267
5．9　內(nèi)容預(yù)告　267
第6章　在畫布中融合HTML5視頻　268
6．1　HTML5中對視頻的支持　268
6．1．1　Theora + Vorbis = ．ogg　268
6．1．2　H．264 + $$$ = ．mp4　269
6．1．3　VP8 + Vorbis = ．webm　269
6．1．4　結(jié)合3種視頻格式　270
6．2　轉(zhuǎn)換視頻格式　270
6．3　HTML5視頻的基本實(shí)現(xiàn)方法　271
6．3．1　普通的視頻嵌入方法　272
6．3．2　添加視頻控制器并設(shè)置播放方式　273
6．3．3　調(diào)整視頻的寬度和高度　274
6．4　使用JavaScript預(yù)加載視頻　279
6．5　視頻與畫布　282
6．5．1　在HTML5 Canvas上顯示視頻　282
6．5．2　HTML5的視頻屬性　288
6．6　在畫布上使用視頻的示例　292
6．6．1　使用currentTime屬性創(chuàng)建視頻事件　292
6．6．2　在畫布上旋轉(zhuǎn)視頻　296
6．6．3　在畫布上制作視頻拼圖　302
6．6．4　在畫布上創(chuàng)建視頻控制器　315
6．7　回顧動(dòng)畫效果之移動(dòng)視頻　324
6．8　使用JavaScript錄制視頻　329
6．8．1　網(wǎng)絡(luò)RTC多媒體捕捉接口及數(shù)據(jù)流接口　329
6．8．2　例1：播放視頻　329
6．8．3　例2：在Canvas上播放視頻并截圖　332
6．8．4　例3：創(chuàng)建視頻拼圖　334
6．9　移動(dòng)端HTML5視頻的支持狀況　336
6．10　內(nèi)容預(yù)告　336
第7章　使用音頻　337
7．1　標(biāo)簽　337
7．2　音頻格式　338
7．2．1　支持的音頻格式　338
7．2．2　音頻轉(zhuǎn)換工具Audacity　338
7．2．3　示例：使用所有3種音頻格式　339
7．3　Audio標(biāo)簽的屬性、函數(shù)和事件　340
7．3．1　音頻函數(shù)　340
7．3．2　重要的音頻屬性　341
7．3．3　重要的音頻事件　341
7．3．4　加載并播放音頻　342
7．3．5　在畫布上顯示屬性信息　343
7．4　不使用Audio標(biāo)簽播放聲音　346
7．4．1　使用JavaScript動(dòng)態(tài)創(chuàng)建audio元素　346
7．4．2　查找支持的音頻格式　347
7．4．3　播放聲音　348
7．4．4　不使用標(biāo)簽　349
7．5　創(chuàng)建畫布音頻播放器　352
7．5．1　在Canvas中創(chuàng)建自定義用戶控件　352
7．5．2　加載按鈕資源　353
7．5．3　設(shè)置音頻播放器的值　354
7．5．4　鼠標(biāo)事件　355
7．5．5　滑動(dòng)播放指示器　356
7．5．6　播放/暫停按鈕：檢測單擊并獲取位置　357
7．5．7　循環(huán)/不循環(huán)切換按鈕　359
7．5．8　單擊并拖動(dòng)音量滑塊　360
7．6　音頻案例：太空掠奪者游戲　368
7．6．1　應(yīng)用程序中不同的聲音——事件聲音　369
7．6．2　迭代　369
7．6．3　太空掠奪者游戲框架　369
7．6．4　第一次迭代：使用單個(gè)對象播放聲音　378
7．6．5　第二次迭代：創(chuàng)建無限個(gè)動(dòng)態(tài)聲音對象　378
7．6．6　第三次迭代：創(chuàng)建一個(gè)聲音池　380
7．6．7　第四次迭代：重用預(yù)加載的聲音　382
7．7　Web Audio API　386
7．7．1　什么是Web Audio API　386
7．7．2　使用Web Audio API開發(fā)太空掠奪者　386
7．8　內(nèi)容預(yù)告　389
第8章　Canvas游戲(上)　390
8．1　為什么用HTML5開發(fā)游戲　390
8．1．1　Canvas與Flash比較　390
8．1．2　Canvas提供的新特性　391
8．2　游戲的基本HTML5文件　391
8．3　游戲的設(shè)計(jì)　393
8．4　游戲圖形：使用路徑繪制　393
8．4．1　所需的資源　393
8．4．2　使用路徑繪制游戲的主角　394
8．5　Canvas上的動(dòng)畫　396
8．5．1　游戲定時(shí)器循環(huán)　396
8．5．2　玩家飛船的狀態(tài)變化　397
8．6　對游戲圖形應(yīng)用形狀變換　399
Canvas的棧　399
8．7　游戲圖形變換　401
8．7．1　使玩家飛船繞中心旋轉(zhuǎn)　401
8．7．2　使用Alpha通道實(shí)現(xiàn)飛船淡入　403
8．8　游戲物體的物理算法和動(dòng)畫　405
8．8．1　移動(dòng)玩家飛船　405
8．8．2　使用鍵盤控制玩家飛船　407
8．8．3　設(shè)置玩家飛船的最大速度　411
8．9　基本游戲框架　412
8．9．1　游戲狀態(tài)機(jī)　412
8．9．2　更新/渲染的重復(fù)周期　416
8．9．3　幀率計(jì)數(shù)器對象原型　419
8．10　整合所有元素　420
8．10．1　Geo Blaster游戲架構(gòu)　420
8．10．2　Geo Blaster全局游戲變量　423
8．11　玩家對象　424
8．12　Geo Blaster游戲的算法　425
8．12．1　邏輯顯示對象數(shù)組　425
8．12．2　級別難度控制　427
8．12．3　關(guān)卡和游戲結(jié)束　427
8．12．4　獎(jiǎng)勵(lì)玩家另外的飛船　429
8．12．5　應(yīng)用碰撞檢測　429
8．13　Geo Blaster Basic的完整源代碼　431
8．14　隕石對象原型　432
8．15　在網(wǎng)格上使用A*算法查找最短路徑　434
8．15．1　什么是A*算法　434
8．15．2　在更大的地圖上使用A*　440
8．15．3　可穿過對角線的A*尋路算法　444
8．15．4　在帶權(quán)值節(jié)點(diǎn)的地圖里使用A*尋路算法　448
8．15．5　帶權(quán)值及穿越對角線功能的A*尋路算法　452
8．15．6　讓游戲角色順著A*最短路徑移動(dòng)　459
8．15．7　坦克斜穿過墻壁　463
8．16　內(nèi)容預(yù)告　472
第9章　Canvas游戲(下)　474
9．1　擴(kuò)展版的Geo Blaster　474
9．1．1　Geo Blaster的圖片表　475
9．1．2　渲染其他游戲?qū)ο蟆?80
9．1．3　添加聲音　485
9．1．4　用對象池管理對象實(shí)例　490
9．1．5　添加步長定時(shí)器　492
9．2　在運(yùn)行時(shí)創(chuàng)建動(dòng)態(tài)的圖片表　494
9．3　簡單的基于區(qū)塊的游戲　498
9．3．1　微型坦克迷宮的介紹　499
9．3．2　游戲中用到的圖片表　500
9．3．3　游戲區(qū)域　501
9．3．4　玩家　502
9．3．5　敵人　503
9．3．6　目標(biāo)　504
9．3．7　爆炸效果　504
9．3．8　回合制游戲的流程和狀態(tài)機(jī)　504
9．3．9　簡單區(qū)塊移動(dòng)邏輯概述　508
9．3．10　渲染邏輯概述　510
9．3．11　自定義簡單人工智能概述　511
9．3．12　微型坦克迷宮的完整游戲代碼　512
9．4　為基于區(qū)塊的游戲世界添加滾動(dòng)效果　512
9．4．1　第一步：將用于繪制屏幕的區(qū)塊放在一個(gè)圖片表中　513
9．4．2　第二步：用二維數(shù)組表示游戲世界　513
9．4．3　第三步：將基于區(qū)塊的世界繪制在畫布上　513
9．4．4　粗糙滾動(dòng)與精確滾動(dòng)　514
9．4．5　camera對象　514
9．4．6　world對象　515
9．4．7　精確滾動(dòng)時(shí)行和列的緩沖區(qū)　515
9．4．8　粗糙滾動(dòng)的完整代碼示例　521
9．4．9　精確滾動(dòng)的完整代碼示例　525
9．5　內(nèi)容預(yù)告　530
第10章　在移動(dòng)設(shè)備上開發(fā)　531
10．1　第一個(gè)應(yīng)用程序　531
10．1．1　代碼　532
10．1．2　查看BSBingo．html的代碼　537
10．1．3　應(yīng)用程序代碼　540
10．1．4　針對瀏覽器修改游戲　541
10．1．5　在真實(shí)設(shè)備上測試游戲　544
10．2　觸屏版的Retro Blaster游戲　546
10．3　將觸屏版Retro Blaster移動(dòng)化　548
10．3．1　開發(fā)全屏游戲　548
10．3．2　觸摸移動(dòng)事件　550
10．3．3　觸屏版Retro Blaster的完整代碼　555
10．4　超越Canvas　555
10．5　內(nèi)容預(yù)告　555
第11章　進(jìn)一步探索　557
11．1　使用WebGL實(shí)現(xiàn)3D效果　557
11．1．1　WebGL是什么　557
11．1．2　測試WebGL　558
11．1．3　學(xué)習(xí)更多WebGL的知識(shí)　558
11．1．4　WebGL應(yīng)用示例　558
11．1．5　進(jìn)一步探索WebGL　564
11．1．6　WebGL的JavaScript類庫　564
11．2　使用ElectroServer 5實(shí)現(xiàn)多人應(yīng)用程序　566
11．2．1　安裝ElectroServer　566
11．2．2　套接字服務(wù)器程序的基礎(chǔ)架構(gòu)　568
11．2．3　ElectroServer程序的基礎(chǔ)架構(gòu)　569
11．2．4　使用ElectroServer創(chuàng)建聊天程序　570
11．2．5　在Google Chrome中測試應(yīng)用程序　576
11．2．6　進(jìn)一步探索ElectroServer　577
11．2．7　這只是冰山一角　579
11．3　為Canvas創(chuàng)建一個(gè)簡單對象框架　579
11．3．1　創(chuàng)建一個(gè)支持拖放的應(yīng)用程序　580
11．3．2　應(yīng)用程序設(shè)計(jì)　580
11．4　Windows 8應(yīng)用與HTML5 Canvas　592
11．5　HTML5．1與Canvas Level 2中有什么　596
11．5．1　HTML5．1 Canvas Context　596
11．5．2　Canvas Level2　597
11．6　總結(jié)　597
附錄　完整代碼列表　59