第 一部分Canvas 基礎

第1 章 Canvas 概述3

1.1Canvas 是什麼3

1.1.1Canvas 簡介3

1.1.2Canvas 與SVG5

1.2Canv素5

1.2.1Canv素簡介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