HTML5 canvas開發詳解(第2版)
封面介紹
O’Reilly Media，Inc.介紹
第2版介紹
第1版的更新
如何運行本書中的示例
讀者需要具備的知識
本書組織結構
代碼示例的使用
聯系方式
Safari® 在線圖書
1 HTML5 Canvas簡介
1.1 什么是HTML5
1.2 基礎的HTML5頁面
1.2.1 <!doctype html>
1.2.2
1.2.3
1.2.4 …
1.2.5 一個簡單的HTML5頁面
1.3 本書使用的基礎HTML頁面
1.3.1
1.3.2
1.4 文檔對象模型（DOM）和Canvas
1.5 JavaScript和Canvas
JavaScript放置的位置及其理由
1.6 HTML5 Canvas版“Hello World！”
1.6.1 為Canvas封裝JavaScript代碼
1.6.2 將Canvas添加到HTML頁面中
1.6.3 檢測瀏覽器是否支持Canvas
1.6.4 獲得2D環境
1.6.5 drawScreen()函數
1.7 用console.log調試
1.8 2D環境及其當前狀態
1.9 HTML5 Canvas對象
1.10 第二個示例：猜字母
1.10.1 游戲如何工作
1.10.2 “猜字母”游戲的變量
1.10.3 initGame()函數
1.10.4 eventKeyPressed()函數
1.10.5 drawScreen()函數
1.10.6 導出Canvas到圖像
1.10.7 最終的游戲代碼
1.11 動畫版本的Hello World
1.11.1 一些必要的屬性
1.11.2 動畫循環
1.11.3 使用globalAlpha屬性設置alpha透明度
1.11.4 清除並顯示背景
1.11.5 更新globalAlpha屬性
1.11.6 繪制文字
1.11.7 HTML5 Canvas實現無障礙訪問：子dom
1.12 內容預告
2 在Canvas上繪圖
2.1 本章基本文件設置
2.2 基本矩形
2.3 Canvas狀態
2.3.1 什么不屬於狀態
2.3.2 如何保存和恢復Canvas狀態
2.4 使用路徑創建線段
2.4.1 設置路徑的開始和結束
2.4.2 動態繪圖
2.4.3 高級線段繪制舉例
2.5 高級路徑方法
2.5.1 弧線
2.5.2 貝塞爾曲線
2.5.3 Canvas裁切區域
2.6 在畫布上合成
2.7 簡單畫布變換
2.7.1 旋轉和平移變換
2.7.2 縮放變換
2.7.3 縮放和旋轉組合變換
2.8 用顏色和漸變填充對象
2.8.1 基本填充顏色設置
2.8.2 填充漸變形狀
2.9 用圖案填充形狀
2.10 創建陰影
2.11 清除畫布的方法
2.11.1 簡單填充
2.11.2 重置畫布的寬和高
2.11.3 重新設置畫布的clearRect 函數
2.12 檢查一個點是否在當前路徑
2.13 繪制一個焦點環
2.14 內容預告
3 HTML5 Canvas的文本API
3.1 顯示基本文本
3.1.1 基本文本顯示
3.1.2 在Text Arranger中處理基本文本
3.1.3 HTML表單和畫布之間的通信
3.1.4 使用measureText
3.1.5 fillText和strokeText
3.2 設置文本字體
3.2.1 字體大小、磅重和樣式基礎
3.2.2 在文本編輯器中處理字體大小和外觀
3.2.3 字體顏色
3.2.4 字體基線和對齊
3.2.5 Text Arranger 2.0版
3.3 文本和Canvas上下文
3.3.1 全局alpha和文本
3.3.2 全局陰影和文本
3.4 文本漸變和圖案
3.4.1 文本線性漸變
3.4.2 文本徑向漸變
3.4.3 文本圖像圖案
3.4.4 在Text Arranger中處理漸變和圖案
3.5 寬度、高度、縮放和toDataURL()回顧
3.5.1 動態調整畫布尺寸
3.5.2 動態縮放畫布
3.5.3 Canvas對象的toDataURL()方法
3.6 最終版的Text Arranger
3.7 漸變動畫
3.8 Canvas里文本的未來
3.8.1 CSS文本
3.8.2 文本的無障礙訪問
3.9 內容預告
4 Canvas圖像
4.1 本章的基本文件設置
4.2 圖像基礎
4.2.1 預下載圖像
4.2.2 使用drawImage()函數在畫布上顯示圖像
4.2.3 調整畫布上圖像的大小
4.2.4 將部分圖像復制到畫布
4.3 簡單的幀式動畫
4.3.1 創建動畫幀計數器
4.3.2 創建一個計時循環
4.3.3 改變拼板顯示
4.4 高級幀式動畫
4.4.1 檢查拼圖
4.4.2 創建動畫數組
4.4.3 選擇拼板顯示
4.4.4 在拼板中循環
4.4.5 繪制拼板
4.4.6 在整個畫布上移動圖像
4.5 在圖像上應用旋轉變換
4.5.1 畫布變換基礎
4.5.2 為變換的圖像設置動畫
4.6 創建一個拼板網格
4.6.1 定義拼板地圖
4.6.2 用Tiled創建拼板地圖
4.6.3 在畫布上顯示地圖
4.7 通過大圖片深入了解繪圖屬性
4.7.1 為圖像創建一個窗口
4.7.2 繪制圖像窗口
4.7.3 修改圖片容器的屬性
4.7.4 縮放圖像
4.7.5 平移圖片
4.7.6 同時對圖片進行移動和縮放
4.8 像素操作
4.8.1 操作畫布像素的API
4.8.2 應用程序拼板印章
4.9 畫布間的復制
4.10 使用像素檢測物體碰撞
4.10.1 碰撞的對象
4.10.2 如何檢測物體碰撞
4.10.3 檢查兩個物體的重疊部分
4.11 內容預告
5 數學、物理與動畫
5.1 直線移動
5.1.1 兩點間移動：線段距離
5.1.2 按照矢量移動
5.2 撞牆反彈
5.2.1 單個球反彈
5.2.2 多球撞牆反彈
5.2.3 可動態調整畫布大小的多球碰撞反彈
5.2.4 多球反彈和碰撞
5.2.5 有摩擦力的多球碰撞反彈
5.3 曲線和圓弧運動
5.3.1 勻速圓周運動
5.3.2 簡單螺旋運動
5.3.3 3次貝賽爾曲線運動
5.3.4 移動圖像
5.3.5 創建立方貝塞爾曲線環
5.4 簡單重力、彈力及摩擦力
5.4.1 簡單重力
5.4.2 帶反彈的簡單重力
5.4.3 重力反彈及應用簡單彈力
5.4.4 簡單重力、彈力及摩擦力的綜合
5.5 緩沖
5.5.1 緩沖結束（飛船着陸）
5.5.2 緩沖開始（起飛）
5.6 Box2D和畫布
5.6.1 下載Box2dWeb
5.6.2 Box2D的工作原理
5.6.3 Box2D的Hello World
5.6.4 引入框架庫
5.6.5 創建Box2dWeb世界
5.6.6 Box2dWeb中的單位
5.6.7 在Box2D中定義牆
5.6.8 創建小球
5.6.9 b2debugDraw渲染與Canvas渲染的對比
5.6.10 drawScreen()函數
5.6.11 重溫反彈球
5.6.12 轉換為Canvas
5.7 與Box2D交互
5.7.1 創建箱子
5.7.2 渲染箱子
5.7.3 增加互動效果
5.7.4 創建箱子
5.7.5 處理小球
5.8 關於Box2D的更多內容
5.9 內容預告
6 在畫布中融合HTML5視頻
6.1 HTML5中對視頻的支持
6.1.1 Theora + Vorbis = .ogg
6.1.2 H.264 + $$$ = .mp4
6.1.3 VP8 + Vorbis = .webm
6.1.4 結合3種視頻格式
6.2 轉換視頻格式
6.3 HTML5視頻的基本實現方法
6.3.1 普通的視頻嵌入方法
6.3.2 添加視頻控制器並設置播放方式
6.3.3 調整視頻的寬度和高度
6.4 使用JavaScript預加載視頻
6.5 視頻與畫布
6.5.1 在HTML5 Canvas上顯示視頻
6.5.2 HTML5的視頻屬性
6.6 在畫布上使用視頻的示例
6.6.1 使用currentTime屬性創建視頻事件
6.6.2 在畫布上旋轉視頻
6.6.3 在畫布上制作視頻拼圖
6.6.4 在畫布上創建視頻控制器
6.7 回顧動畫效果之移動視頻
6.8 使用JavaScript錄制視頻
6.8.1 網絡RTC多媒體捕捉接口及數據流接口
6.8.2 例1：播放視頻
6.8.3 例2：在Canvas上播放視頻並截圖
6.8.4 例3：創建視頻拼圖
6.9 移動端HTML5視頻的支持狀況
6.10 內容預告
7 使用音頻
7.1
7.2 音頻格式
7.2.1 支持的音頻格式
7.2.2 音頻轉換工具Audacity
7.2.3 示例：使用所有3種音頻格式
7.3 Audio標簽的屬性、函數和事件
7.3.1 音頻函數
7.3.2 重要的音頻屬性
7.3.3 重要的音頻事件
7.3.4 加載並播放音頻
7.3.5 在畫布上顯示屬性信息
7.4 不使用Audio標簽播放聲音
7.4.1 使用JavaScript動態創建audio元素
7.4.2 查找支持的音頻格式
7.4.3 播放聲音
7.4.4 不使用標簽
7.5 創建畫布音頻播放器
7.5.1 在Canvas中創建自定義用戶控件
7.5.2 加載按鈕資源
7.5.3 設置音頻播放器的值
7.5.4 鼠標事件
7.5.5 滑動播放指示器
7.5.6 播放/暫停按鈕：檢測單擊並獲取位置
7.5.7 循環/不循環切換按鈕
7.5.8 單擊並拖動音量滑塊
7.6 音頻案例：太空掠奪者游戲
7.6.1 應用程序中不同的聲音——事件聲音
7.6.2 迭代
7.6.3 太空掠奪者游戲框架
7.6.4 第一次迭代：使用單個對象播放聲音
7.6.5 第二次迭代：創建無限個動態聲音對象
7.6.6 第三次迭代：創建一個聲音池
7.6.7 第四次迭代：重用預加載的聲音
7.7 Web Audio API
7.7.1 什么是Web Audio API
7.7.2 使用Web Audio API開發太空掠奪者
7.8 內容預告
8 Canvas游戲（上）
8.1 為什么用HTML5開發游戲
8.1.1 Canvas與Flash比較
8.1.2 Canvas提供的新特性
8.2 游戲的基本HTML5文件
8.3 游戲的設計
8.4 游戲圖形：使用路徑繪制
8.4.1 所需的資源
8.4.2 使用路徑繪制游戲的主角
8.5 Canvas上的動畫
8.5.1 游戲定時器循環
8.5.2 玩家飛船的狀態變化
8.6 對游戲圖形應用形狀變換
Canvas的棧
8.7 游戲圖形變換
8.7.1 使玩家飛船繞中心旋轉
8.7.2 使用Alpha通道實現飛船淡入
8.8 游戲物體的物理算法和動畫
8.8.1 移動玩家飛船
8.8.2 使用鍵盤控制玩家飛船
8.8.3 設置玩家飛船的最大速度
8.9 基本游戲框架
8.9.1 游戲狀態機
8.9.2 更新/渲染的重復周期
8.9.3 幀率計數器對象原型
8.10 整合所有元素
8.10.1 Geo Blaster游戲架構
8.10.2 Geo Blaster全局游戲變量
8.11 玩家對象
8.12 Geo Blaster游戲的算法
8.12.1 邏輯顯示對象數組
8.12.2 級別難度控制
8.12.3 關卡和游戲結束
8.12.4 獎勵玩家另外的飛船
8.12.5 應用碰撞檢測
8.13 Geo Blaster Basic的完整源代碼
8.14 隕石對象原型
8.15 在網格上使用A*算法查找最短路徑
8.15.1 什么是A*算法
8.15.2 在更大的地圖上使用A*
8.15.3 可穿過對角線的A*尋路算法
8.15.4 在帶權值節點的地圖里使用A*尋路算法
8.15.5 帶權值及穿越對角線功能的A*尋路算法
8.15.6 讓游戲角色順着A*最短路徑移動
8.15.7 坦克斜穿過牆壁
8.16 內容預告
9 Canvas游戲（下）
9.1 擴展版的Geo Blaster
9.1.1 Geo Blaster的圖片表
9.1.2 渲染其他游戲對象
9.1.3 添加聲音
9.1.4 用對象池管理對象實例
9.1.5 添加步長定時器
9.2 在運行時創建動態的圖片表
9.3 簡單的基於區塊的游戲
9.3.1 微型坦克迷宮的介紹
9.3.2 游戲中用到的圖片表
9.3.3 游戲區域
9.3.4 玩家
9.3.5 敵人
9.3.6 目標
9.3.7 爆炸效果
9.3.8 回合制游戲的流程和狀態機
9.3.9 簡單區塊移動邏輯概述
9.3.10 渲染邏輯概述
9.3.11 自定義簡單人工智能概述
9.3.12 微型坦克迷宮的完整游戲代碼
9.4 為基於區塊的游戲世界添加滾動效果
9.4.1 第一步：將用於繪制屏幕的區塊放在一個圖片表中
9.4.2 第二步：用二維數組表示游戲世界
9.4.3 第三步：將基於區塊的世界繪制在畫布上
9.4.4 粗糙滾動與精確滾動
9.4.5 camera對象
9.4.6 world對象
9.4.7 精確滾動時行和列的緩沖區
9.4.8 粗糙滾動的完整代碼示例
9.4.9 精確滾動的完整代碼示例
9.5 內容預告
10 在移動設備上開發
10.1 第一個應用程序
10.1.1 代碼
10.1.2 查看BSBingo.html的代碼
10.1.3 應用程序代碼
10.1.4 針對瀏覽器修改游戲
10.1.5 在真實設備上測試游戲
10.2 觸屏版的Retro Blaster游戲
10.3 將觸屏版Retro Blaster移動化
10.3.1 開發全屏游戲
10.3.2 觸摸移動事件
10.3.3 觸屏版Retro Blaster的完整代碼
10.4 超越Canvas
10.5 內容預告
11 進一步探索
11.1 使用WebGL實現3D效果
11.1.1 WebGL是什么
11.1.2 測試WebGL
11.1.3 學習更多WebGL的知識
11.1.4 WebGL應用示例
11.1.5 進一步探索WebGL
11.1.6 WebGL的JavaScript類庫
11.2 使用ElectroServer 5實現多人應用程序
11.2.1 安裝ElectroServer
11.2.2 套接字服務器程序的基礎架構
11.2.3 ElectroServer程序的基礎架構
11.2.4 使用ElectroServer創建聊天程序
11.2.5 在Google Chrome中測試應用程序
11.2.6 進一步探索ElectroServer
11.2.7 這只是冰山一角
11.3 為Canvas創建一個簡單對象框架
11.3.1 創建一個支持拖放的應用程序
11.3.2 應用程序設計
11.4 Windows 8應用與HTML5 Canvas
11.5 HTML5.1與Canvas Level 2中有什么
11.5.1 HTML5.1 Canvas Context
11.5.2 Canvas Level2
11.6 總結
附錄 完整代碼列表
思維導圖
防止博客圖床圖片失效，防止圖片源站外鏈：
http://www.processon.com/chart_image/5e5b35b5e4b03627650b141a.png)
思維導圖在線編輯鏈接：