《HTML5 Canvas開發詳解》是2013年8月人民郵電出版社出版的圖書，作者是[美]Steve Fulton、Jeff Fulton。
基本介紹
- 中文名：HTML5 Canvas開發詳解
- 作者：[美]Steve Fulton、Jeff Fulton
- 出版時間：2013年8月
- 出版社：人民郵電出版社
- 頁數：573 頁
- ISBN：9787115321862
- 定價：99 元
- 開本：16 開
- 裝幀：平裝
內容簡介,圖書目錄,
內容簡介
HTML5是Web應用程式開發的新趨勢，Canvas是其**令人興奮的新特性。《HTML5 Canvas開發詳解》通過對Canvas元素進行詳細介紹，引領讀者進入HTML5開發的大門。通過《HTML5 Canvas開發詳解》，讀者將學到如何使用Canvas進行繪圖、渲染文字、處理圖像、創建動畫，**終構建出互動式的多媒體應用程式。
《HTML5 Canvas開發詳解》適合各個層級的Web套用開發人員閱讀使用。不論他現在是使用Flash、Silverlight的成熟開發人員，還僅僅是只用過HTML及JavaScript的初學者。
圖書目錄
第 1章 HTML5 Canvas簡介 1
1.1 基礎的HTML頁面 2
1.1.1 2
1.1.2 3
1.1.3 3
1.1.4 … 3
1.1.5 實現簡單的HTML頁面 3
1.2 本書中使用的基礎HTML頁面 4
1.2.1
4
1.2.2
5
1.3 文檔對象模型(DOM)和Canvas 5
1.4 JavaScript和Canvas 5
1.4.1 JavaScript框架和庫 5
1.4.2 JavaScript放置的位置及其理由 6
1.5 HTML5 Canvas版“Hello World！” 6
1.5.1 為Canvas封裝JavaScript代碼 7
1.5.2 將Canvas添加到HTML頁面中 8
1.5.3 檢測瀏覽器是否支持Canvas 9
1.5.4 獲得2D上下文 10
1.5.5 drawScreen( )函式 10
1.6 用Console.log調試 13
1.7 2D上下文及其當前狀態 14
1.8 HTML5 Canvas對象 15
1.9 第 二個示例：猜字母 15
1.9.1 遊戲如何工作 16
1.9.2 “猜字母”遊戲的變數 16
1.9.3 initGame( )函式 17
1.9.4 eventKeyPressed( )函式 17
1.9.5 drawScreen( )函式 19
1.9.6 導出Canvas到圖像 20
1.9.7 **終的遊戲代碼 21
1.10 內容預告 24
第 2章 在Canvas上繪圖 25
2.1 本章基本檔案設定 25
2.2 基本矩形 26
2.3 Canvas狀態 27
2.3.1 什麼不屬於狀態 28
2.3.2 如何保存和恢復Canvas狀態 28
2.4 使用路徑創建線段 28
2.4.1 設定路徑的開始和結束 28
2.4.2 動態繪圖 28
2.4.3 高級線段繪製舉例 30
2.5 高級路徑方法 31
2.5.1 弧線 31
2.5.2 貝塞爾曲線 33
2.5.3 Canvas裁切區域 34
2.6 在畫布上合成 36
2.7 簡單畫布變換 38
2.7.1 旋轉和平移變換 38
2.7.2 縮放變換 43
2.7.3 縮放和旋轉組合變換 44
2.8 用顏色和漸變填充對象 46
2.8.1 基本填充顏色設定 46
2.8.2 填充漸變形狀 47
2.9 用圖案填充形狀 56
2.10 創建陰影 59
2.11 內容預告 60
第3章 HTML5 Canvas的文本API 61
3.1 顯示基本文本 61
3.1.1 基本文本顯示 61
3.1.2 在Text Arranger中處理基本文本 62
3.1.3 HTML表單和畫布之間的通信 62
3.1.4 使用measureText 63
3.1.5 fillText和strokeText 64
3.2 設定文本字型 70
3.2.1 字型大小、磅重和樣式基礎 70
3.2.2 在文本編輯器中處理字型大小和外觀 70
3.2.3 字型顏色 74
3.2.4 字型基線和對齊 76
3.2.5 Text Arranger 2.0版 80
3.3 文本和Canvas上下文 84
3.3.1 全局Alpha和文本 84
3.3.2 全局陰影和文本 86
3.4 文本漸變和圖案 89
3.4.1 文本線性漸變 89
3.4.2 文本徑向漸變 90
3.4.3 文本圖像圖案 90
3.4.4 在Text Arranger中處理漸變和圖案 92
3.5 寬度、高度、縮放和toDataURL( )回顧 94
3.5.1 動態調整畫布尺寸 94
3.5.2 動態縮放畫布 97
3.5.3 Canvas對象的toDataURL( )方法 98
3.6 **終版的Text Arranger 99
3.7 內容預告 110
第4章 Canvas圖像 111
4.1 本章的基本檔案設定 111
4.2 圖像基礎 112
4.2.1 預下載圖像 113
4.2.2 使用drawImage( )函式在畫布上顯示圖像 113
4.2.3 調整畫布上圖像的大小 115
4.2.4 將部分圖像複製到畫布 116
4.3 簡單的幀式動畫 117
4.3.1 創建動畫幀計數器 117
4.3.2 創建一個計時循環 118
4.3.3 改變拼板顯示 118
4.4 高級幀式動畫 119
4.4.1 檢查拼圖 120
4.4.2 創建動畫數組 120
4.4.3 選擇拼板顯示 120
4.4.4 在拼板中循環 121
4.4.5 繪製拼板 121
4.4.6 在整個畫布上移動圖像 122
4.5 在圖像上套用旋轉變換 123
4.5.1 畫布變換基礎 124
4.5.2 為變換的圖像設定動畫 126
4.6 創建一個拼板格線 128
4.6.1 定義拼板地圖 129
4.6.2 用Tiled創建拼板地圖 129
4.6.3 在畫布上顯示地圖 131
4.7 縮放和平移圖像 134
4.7.1 為圖像創建一個視窗 135
4.7.2 繪製圖像視窗 135
4.7.3 平移圖像 136
4.7.4 縮放和平移圖像 138
4.7.5 應用程式：控制平移和縮放 139
4.8 像素操作 143
4.8.1 操作畫布像素的API 143
4.8.2 應用程式拼板印章 144
4.9 畫布間的複製 150
4.10 內容預告 153
第5章 數學、物理與動畫 154
5.1 直線移動 154
5.1.1 兩點間移動：線段距離 156
5.1.2 在矢量上移動 161
5.2 撞牆反彈 164
5.2.1 單個球反彈 165
5.2.2 多球撞牆反彈 168
5.2.3 可動態調整畫布大小的多球碰撞反彈 173
5.2.4 多球反彈和碰撞 178
5.2.5 有摩擦力的多球碰撞反彈 190
5.3 曲線和圓弧運動 195
5.3.1 勻速圓周運動 195
5.3.2 簡單螺旋運動 198
5.3.3 立方貝賽爾曲線運動 200
5.3.4 移動圖像 205
5.3.5 創建立方貝塞爾曲線環 209
5.4 簡單重力、彈力及摩擦力 213
5.4.1 簡單的重力 213
5.4.2 帶反彈的簡單重力 216
5.4.3 重力反彈及套用簡單彈力 219
5.4.4 簡單重力、彈力及摩擦力的綜合 222
5.5 緩衝 224
5.5.1 緩衝結束(飛船著陸) 224
5.5.2 緩衝開始(起飛) 228
5.6 內容預告 231
第6章 在畫布中融合HTML5視頻 232
6.1 HTML5中對視頻的支持 232
6.1.1 Theora + Vorbis = .ogg 232
6.1.2 H.264 + $$$ = .mp4 233
6.1.3 VP8 + Vorbis = .webm 233
6.1.4 結合3種視頻格式 234
6.2 轉換視頻格式 234
6.3 HTML5視頻的基本實現方法 234
6.3.1 普通的視頻嵌入方法 235
6.3.2 添加視頻控制器並設定播放方式 237
6.3.3 調整視頻的寬度和高度 238
6.4 使用JavaScript預載入視頻 242
6.5 視頻與畫布 246
6.5.1 在HTML5 Canvas上顯示視頻 246
6.5.2 HTML5的視頻屬性 251
6.6 在畫布上使用視頻的示例 255
6.6.1 使用currentTime屬性創建視頻事件 255
6.6.2 在畫布上旋轉視頻 259
6.6.3 在畫布上製作視頻拼圖 264
6.6.4 在畫布上創建視頻控制器 276
6.7 回顧動畫效果之移動視頻 284
6.8 內容預告 288
第7章 使用音頻 289
7.1
標籤 289
7.2 音頻格式 290
7.2.1 支持的音頻格式 290
7.2.2 音頻轉換工具Audacity 290
7.2.3 示例：使用所有3種音頻格式 291
7.3 Audio標籤的屬性、函式和事件 292
7.3.1 音頻函式 292
7.3.2 重要的音頻屬性 293
7.3.3 重要的音頻事件 293
7.3.4 載入並播放音頻 294
7.3.5 在畫布上顯示屬性信息 294
7.4 不使用Audio標籤播放聲音 298
7.4.1 使用JavaScript動態創建audio元素 298
7.4.2 查找支持的音頻格式 299
7.4.3 播放聲音 300
7.4.4 不使用標籤 301
7.5 創建畫布音頻播放器 303
7.5.1 在Canvas中創建自定義用戶控制項 304
7.5.2 載入按鈕資源 305
7.5.3 設定音頻播放器的值 306
7.5.4 滑鼠事件 307
7.5.5 滑動播放指示器 307
7.5.6 播放/暫停按鈕：檢測單擊並獲取位置 308
7.5.7 循環/不循環切換按鈕 310
7.5.8 單擊並拖動音量滑塊 311
7.6 音頻案例：太空掠奪者遊戲 319
7.6.1 應用程式中不同的聲音——事件聲音 319
7.6.2 疊代 319
7.6.3 太空掠奪者遊戲框架 320
7.6.4 第 1次疊代：使用單個對象播放聲音 328
7.6.5 第 2次疊代：創建無限個動態聲音對象 328
7.6.6 第3次疊代：創建一個聲音池 330
7.6.7 第4次疊代：重用預載入的聲音 332
7.7 內容預告 343
第8章 畫布遊戲本質 344
8.1 為什麼用HTML5開發遊戲 344
8.1.1 Canvas與Flash比較 344
8.1.2 Canvas提供的新特性 345
8.2 遊戲的基本HTML5檔案 345
8.3 遊戲的設計 346
8.4 遊戲圖形：使用路徑繪製 347
8.4.1 所需的資源 347
8.4.2 使用路徑繪製遊戲的主角 347
8.5 Canvas上的動畫 350
8.5.1 遊戲定時器循環 350
8.5.2 玩家飛船的狀態變化 351
8.6 對遊戲圖形套用形狀變換 353
8.7 遊戲圖形變換 355
8.7.1 使玩家飛船繞中心旋轉 355
8.7.2 使用Alpha通道實現飛船淡入 357
8.8 遊戲物體的物理算法和動畫 358
8.8.1 移動玩家飛船 359
8.8.2 使用鍵盤控制玩家飛船 360
8.8.3 設定玩家飛船的**大速度 365
8.9 基本遊戲框架 365
8.9.1 遊戲狀態機 365
8.9.2 更新/渲染的重複周期 369
8.9.3 幀率計數器對象原型 371
8.10 整合所有元素 373
8.10.1 Geo Blaster遊戲架構 373
8.10.2 Geo Blaster全局遊戲變數 376
8.11 玩家對象 377
8.12 Geo Blaster遊戲的算法 377
8.12.1 邏輯顯示對象數組 378
8.12.2 級別難度控制 380
8.12.3 關卡和遊戲結束 380
8.12.4 獎勵玩家另外的飛船 381
8.12.5 套用碰撞檢測 382
8.13 Geo Blaster Basic的完整原始碼 384
8.14 隕石對象原型 410
8.15 內容預告 412
第9章 點陣圖與聲音的結合 413
9.1 擴展版的Geo Blaster 413
9.1.1 Geo Blaster的圖片表 414
9.1.2 渲染其他遊戲對象 419
9.1.3 添加聲音 424
9.1.4 用對象池管理對象實例 428
9.1.5 添加步長定時器 430
9.1.6 Geo Blaster擴展版的完整原始碼 432
9.2 在運行時創建動態的圖片表 464
9.3 簡單的基於區塊的遊戲 468
9.3.1 微型坦克迷宮的介紹 469
9.3.2 遊戲中用到的圖片表 470
9.3.3 遊戲區域 471
9.3.4 玩家 472
9.3.5 敵人 473
9.3.6 目標 474
9.3.7 爆炸效果 474
9.3.8 回合制遊戲的流程和狀態機 474
9.3.9 簡單區塊移動邏輯概述 478
9.3.10 渲染邏輯概述 480
9.3.11 自定義簡單人工智慧概述 481
9.3.12 微型坦克迷宮的完整遊戲代碼 482
9.4 內容預告 501
第 10章 使用PhoneGap製作移動設備遊戲 502
10.1 進軍移動設備 502
10.1.1 PhoneGap簡介 503
10.1.2 應用程式 503
10.1.3 代碼 504
10.1.4 查看BSBingo.html的代碼 508
10.1.5 應用程式代碼 511
10.2 使用PhoneGap創建iOS應用程式 512
10.2.1 安裝Xcode 512
10.2.2 安裝PhoneGap 513
10.2.3 在Xcode中創建BS Bingo的PhonGap工程 515
10.2.4 在模擬器中測試新的空白應用程式 517
10.2.5 在工程中整合BS Bingo 519
10.2.6 設定套用的方向 521
10.2.7 改變啟動圖和圖表 522
10.2.8 在模擬器上測試 524
10.2.9 添加iPhone手勢 526
10.2.10 在index.htm頁面中添加手勢函式 527
10.2.11 在設備上測試 528
10.2.12 使用Xcode指定一個測試設備 529
10.3 超越Canvas 530
10.4 內容預告 531
第 11章 進一步探索 532
11.1 使用WebGL實現3D效果 532
11.1.1 WebGL是什麼 533
11.1.2 測試WebGL 533
11.1.3 學習更多WebGL的知識 534
11.1.4 WebGL套用示例 534
11.1.5 完整的原始碼列表 539
11.1.6 進一步探索WebGL 546
11.1.7 WebGL的JavaScript類庫 546
11.2 使用ElectroServer 5實現多人應用程式 547
11.2.1 安裝ElectroServer 548
11.2.2 套接字伺服器程式的基礎架構 550
11.2.3 ElectroServer程式的基礎架構 551
11.2.4 使用ElectroServer創建聊天程式 552
11.2.5 在Google Chrome中測試應用程式 558
11.2.6 進一步探索ElectroServer 562
11.2.7 這只是冰山一角 571
11.3 總結 571
