●第一部分Canvas基礎
第1章Canvas概述3
1.1Canvas是什麼3
1.1.1Canvas簡介3
1.1.2Canvas與SVG5
1.2Can素5
1.2.1Can素簡介6
1.2.2Canvas對像8
第2章直線圖形10
2.1直線圖形簡介10
2.2直線10
2.2.1Canvas坐標繫10
2.2.2直線的繪制11
2.3矩形16
2.3.1描邊矩形16
2.3.2填充矩形18
2.3.3rect()方法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.1arc()方法畫弧線39
3.3.2arcTo()方法畫弧線43
3.4二次貝塞爾曲線47
3.5三次貝塞爾曲線50
3.6實戰題：繪制扇形54
第4章線條操作57
4.1線條操作簡介57
4.2lineWidth屬性57
4.3lineCap屬性60
4.4lineJoin屬性63
4.5setLineDash()方法65
第5章文本操作67
5.1文本操作簡介67
5.2文本操作方法67
5.2.1strokeText()方法68
5.2.2fillText()方法69
5.2.3measureText()方法71
5.3文本操作屬性73
5.3.1font屬性73
5.3.2textAlign屬性74
5.3.3textBaseline屬性76
第6章圖片操作78
6.1圖片操作簡介78
6.2繪制圖片78
6.2.1drawImage(image，dx，dy)78
6.2.2drawImage(image，dx，dy，dw，dh)81
6.2.3drawImage(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.1translate()方法94
7.2.2clearRect()方法清空Canvas98
7.3圖形縮放99
7.3.1scale()方法99
7.3.2scale()方法的負作用103
7.4圖形旋轉104
7.4.1rotate()方法104
7.4.2改變旋轉中心107
7.5變換矩陣108
7.5.1transform()方法108
7.5.2setTransform()方法113
7.6深入變形操作115
7.7實戰題：繪制絢麗的圖形117
7.8實戰題：繪制彩虹118
第8章像素操作120
8.1像素操作簡介120
8.1.1getImageData()方法120
8.1.2putImageData()方法121
8.2反轉效果122
8.3黑白效果125
8.4亮度效果128
8.5復古效果129
8.6紅色蒙版131
8.7透明處理133
8.8createImageData()方法134
第9章漸變與陰影138
9.1線性漸變138
9.2徑向漸變142
9.3陰影147
第10章Canvas路徑152
10.1什麼是路徑？152
10.2beginPath()方法和closePath()
方法152
10.2.1beginPath()方法152
10.2.2closePath()方法155
10.3isPointInPath()方法161
第11章Canvas狀態164
11.1什麼是狀態164
11.2clip()方法164
11.3save()方法和restore()方法167
11.3.1圖形或圖片剪切168
11.3.2圖形或圖片變形170
11.3.3狀態屬性的改變172
第12章其他應用175
12.1Canvas對像175
12.1.1Canvas對像屬性175
12.1.2Canvas對像方法177
12.2globalAlpha屬性179
12.3globalCompositeOperation屬性180
12.4strokeStyle和fillStyle184
第二部分Canvas進階
第13章事件操作191
13.1Canvas進階簡介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.2Math.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.1Canvas遊戲開發簡介319
19.2Box2D簡介320
19.2.1Box2D320
19.2.2Box2DWeb320
19.3HTML5遊戲引擎323
第20章Canvas圖表庫326
20.1Canvas圖表庫簡介326
20.2ECharts和HightCharts327

作者根據自己多年的前後端開發經驗，詳盡介紹了HTML5 Canvas動畫開發技術。本書分為兩大部分：第一部分介紹Canvas基礎知識，主要包括Canvas概述、直線圖形、曲線圖形、線條操作、文本操作、圖片操作、變形操作、像素操作、漸變與陰影、Canvas路徑、Canvas狀態及其他應用；第二部分介紹Canvas進階知識，主要包括事件操作、物理動畫、邊界檢測、踫撞檢測、用戶交互、高級動畫、Canvas遊戲開發、Canvas圖表庫。此外，本書還配備了書中所有案例的源代碼和PPT教學課件，以方便學校老師教學。本書適合作為前端開發人員的參考書，也可以作為各類院校相關專業的教材及教學參考書。