從0到1 HTML5 Canvas 動畫開發 (全彩印刷)

莫振傑

從事前後端開發4年多，開發過綠葉學習網、廣州智能工程研究會網站、
大量在線應用工具以及各種類型網站，業餘時間閱讀大量國內外技術書籍，著有多本編程書。
現為綠葉學習網的站長，該網站用於分享其前後端開發經驗。
作者編寫分享的原創在線教程在互聯網廣受網友推崇。
今年又開發了系列前端線上付費課程。

第 一部分 Canvas 基礎
第 1 章 Canvas 概述 3
1．1 Canvas 是什麼 3
1．1．1 Canvas 簡介 3
1．1．2 Canvas 與SVG 5
1．2 Canvas 元素 5
1．2．1 Canvas 元素簡介 6
1．2．2 Canvas 對象 8

第 2 章 直線圖形 10
2．1 直線圖形簡介 10
2．2 直線 10
2．2．1 Canvas 坐標系 10
2．2．2 直線的繪製 11
2．3 矩形 16
2．3．1 描邊矩形 16
2．3．2 填充矩形 18
2．3．3 rect() 方法 22
2．3．4 清空矩形 24
2．4 多邊形 26
2．4．1 箭頭 26
2．4．2 正多邊形 27
2．4．3 五角星 30
2．5 實戰題：繪製調色板 31

第3 章 曲線圖形 34
3．1 曲線圖形簡介 34
3．2 圓形 34
3．2．1 圓形簡介 34
3．2．2 描邊圓 35
3．2．3 填充圓 38
3．3 弧線 39
3．3．1 arc() 方法畫弧線 39
3．3．2 arcTo() 方法畫弧線 43
3．4 二次貝塞爾曲線 47
3．5 三次貝塞爾曲線 50
3．6 實戰題：繪製扇形 54

第4 章 線條操作 57
4．1 線條操作簡介 57
4．2 lineWidth 屬性 57
4．3 lineCap 屬性 60
4．4 lineJoin 屬性 63
4．5 setLineDash() 方法 65

第5 章 文本操作 67
5．1 文本操作簡介 67
5．2 文本操作方法 67
5．2．1 strokeText() 方法 68
5．2．2 fillText() 方法 69
5．2．3 measureText() 方法 71
5．3 文本操作屬性 73
5．3．1 font 屬性 73
5．3．2 textAlign 屬性 74
5．3．3 textBaseline 屬性 76

第6 章 圖片操作 78
6．1 圖片操作簡介 78
6．2 繪製圖片 78
6．2．1 drawImage(image ， dx ， dy) 78
6．2．2 drawImage(image ， dx ， dy ， dw ， dh) 81
6．2．3 drawImage(image ， sx ， sy ， sw ，sh，
dx ， dy ， dw ， dh) 83
6．3 平鋪圖片 85
6．4 切割圖片 88
6．5 深入圖片操作 91

第7 章 變形操作 94
7．1 變形操作簡介 94
7．2 圖形平移 94
7．2．1 translate() 方法 94
7．2．2 clearRect() 方法清空Canvas 98
7．3 圖形縮放 99
7．3．1 scale() 方法 99
7．3．2 scale() 方法的負作用 103
7．4 圖形旋轉 104
7．4．1 rotate() 方法 104
7．4．2 改變旋轉中心 107
7．5 變換矩陣 108
7．5．1 transform() 方法 108
7．5．2 setTransform() 方法 113
7．6 深入變形操作 115
7．7 實戰題：繪製絢麗的圖形 117
7．8 實戰題：繪製彩虹 118

第8 章 像素操作 120
8．1 像素操作簡介 120
8．1．1 getImageData() 方法 120
8．1．2 putImageData() 方法 121
8．2 反轉效果 122
8．3 黑白效果 125
8．4 亮度效果 128
8．5 復古效果 129
8．6 紅色蒙版 131
8．7 透明處理 133
8．8 createImageData() 方法 134

第9 章 漸變與陰影 138
9．1 線性漸變 138
9．2 徑向漸變 142
9．3 陰影 147

第 10 章 Canvas 路徑 152
10．1 什麼是路徑？ 152
10．2 beginPath() 方法和closePath() 方法 152
10．2．1 beginPath() 方法 152
10．2．2 closePath() 方法 155
10．3 isPointInPath() 方法 161

第 11 章 Canvas 狀態 164
11．1 什麼是狀態 164
11．2 clip() 方法 164
11．3 save() 方法和restore() 方法 167
11．3．1 圖形或圖片剪切 168
11．3．2 圖形或圖片變形 170
11．3．3 狀態屬性的改變 172

第 12 章 其他應用 175
12．1 Canvas 對象 175
12．1．1 Canvas 對象屬性 175
12．1．2 Canvas 對象方法 177
12．2 globalAlpha 屬性 179
12．3 globalCompositeOperation 屬性 180
12．4 strokeStyle 和fillStyle 184

第二部分 Canvas 進階
第 13 章 事件操作 191
13．1 Canvas 進階簡介 191
13．2 鼠標事件 191
13．2．1 鼠標事件簡介 191
13．2．2 獲取鼠標指針位置 192
13．3 鍵盤事件 194
從0 到1 系列圖書 目錄 2
13．3．1 鍵盤事件簡介 194
13．3．2 獲取物體移動方向 195
13．4 循環事件 198

第 14 章 物理動畫 201
14．1 物理動畫簡介 201
14．2 三角函數簡介 202
14．2．1 什麼是三角函數 202
14．2．2 Math． atan() 與Math． atan2() 203
14．3 三角函數應用 208
14．3．1 兩點間距離 208
14．3．2 圓周運動 210
14．3．3 波形運動 215
14．4 勻速運動 220
14．4．1 勻速運動簡介 220
14．4．2 速度的合成和分解 221
14．5 加速運動 225
14．5．1 加速運動簡介 225
14．5．2 加速度的合成和分解 228
14．6 重力 230
14．6．1 重力簡介 230
14．6．2 重力應用 231
14．7 摩擦力 235

第 15 章 邊界檢測 238
15．1 邊界檢測簡介 238
15．2 邊界限制 239
15．3 邊界環繞 241
15．4 邊界生成 246
15．5 邊界反彈 252

第 16 章 碰撞檢測 257
16．1 碰撞檢測簡介 257
16．2 外接矩形判定法 257
16．3 外接圓判定法 265
16．4 多物體碰撞 269
16．4．1 排列組合 269
16．4．2 多物體碰撞 270

第 17 章 用戶交互 277
17．1 用戶交互簡介 277
17．2 捕獲物體 277
17．2．1 捕獲物體簡介 277
17．2．2 捕獲靜止物體 279
17．2．3 捕獲運動物體 281
17．3 拖曳物體 285
17．4 拋擲物體 290

第 18 章 高級動畫 299
18．1 高級動畫簡介 299
18．2 緩動動畫簡介 299
18．3 緩動動畫應用 306
18．4 彈性動畫簡介 310
18．5 彈性動畫應用 314

第 19 章 Canvas 遊戲開發 319
19．1 Canvas 遊戲開發簡介 319
19．2 Box2D 簡介 320
19．2．1 Box2D 320
19．2．2 Box2DWeb 320
19．3 HTML5 遊戲引擎 323

第 20 章 Canvas 圖表庫 326
20．1 Canvas 圖表庫簡介 326
20．2 ECharts 和HightCharts 327