Web前端開發精品課：HTML5 Canvas開發詳解

第一部分 Canvas基礎
第1章 Canvas概述
1.1 Canvas簡介
1.1.1 Canvas是什麼
1.1.2 Canvas與SVG
1.2 Canvas元素知識
1.2.1 Canvas元素
1.2.2 Canvas對象

第2章 直線圖形
2.1 直線圖形簡介
2.2 直線
2.2.1 Canvas坐標系
2.2.2 直線的繪制
2.3 矩形
2.3.1 「描邊」矩形
2.3.2 「填充」矩形
2.3.3 rect()方法
2.3.4 清空矩形
2.4 多邊形
2.4.1 Canvas繪制箭頭
2.4.2 Canvas繪制正多邊形
2.4.3 五角星
2.5 訓練題：繪制調色板

第3章 曲線圖形
3.1 曲線圖形簡介
3.2 圓形簡介
3.2.1 圓形
3.2.2 「描邊」圓
3.2.3 「填充」圓
3.3 弧線
3.3.1 arc()畫弧線
3.3.2 arcTo()畫弧線
3.4 二次貝塞爾曲線
3.5 三次貝塞爾曲線
3.6 訓練題：繪制扇形

第4章 線條操作
4.1 線條操作
4.2 lineWidth屬性
4.3 lineCap屬性
4.4 lineJoin屬性
4.5 setLineDash()方法

第5章 文本操作
5.1 文本操作簡介
5.2 文本操作「方法」
5.2.1 strokeText()方法
5.2.2 fillText()方法
5.2.3 measureText()方法
5.3 文本操作「屬性」
5.3.1 font屬性
5.3.2 textAlign屬性
5.3.3 textBaseline屬性

第6章 圖片操作
6.1 圖片操作簡介
6.2 繪制圖片
6.2.1 drawImage(image,dx,dy)
6.2.2 drawImage(image,dx,dydw,dh)
6.2.3 drawImage(image,sx,sysw,sh,dx,dy,dw,dh)
6.3 平鋪圖片
6.4 切割圖片
6.5 深入圖片操作

第7章 變形操作
7.1 變形操作簡介
7.2 圖形平移
7.2.1 translate()方法
7.2.2 clearRect()方法清空Canvas
7.3 圖形縮放
7.3.1 scale()方法
7.3.2 scale()方法的負作用
7.4 圖形旋轉
7.4.1 rotate()方法
7.4.2 改變旋轉中心
7.5 變換矩陣
7.5.1 transform()方法
7.5.2 setTransform()方法
7.6 深入變形操作
7.7 訓練題：繪制絢麗的圖形
7.8 訓練題：繪制彩虹

第8章 像素操作
8.1 像素操作簡介
8.1.1 getImageData()方法
8.1.2 putImageData()方法
8.2 反轉效果
8.3 黑白效果
8.4 亮度效果
8.5 復古效果
8.6 紅色蒙版
8.7 透明處理
8.8 createImageData()方法

第9章 漸變與陰影
9.1 線性漸變
9.2 徑向漸變
9.3 陰影

第10章 Canvas路徑
10.1 路徑簡介
10.2 beginPath()方法和closePath()方法
10.2.1 beginPath()方法
10.2.2 closePath()方法
10.3 isPointInPath()方法

第11章 Canvas狀態
11.1 狀態簡介
11.2 clip()方法
11.3 save()方法和restore()方法
11.3.1 圖形或圖片剪切
11.3.2 圖形或圖片變形
11.3.3 狀態屬性的改變

第12章 其他應用
12.1 Canvas對象
12.1.1 Canvas對象屬性
12.1.2 Canvas對象方法
12.2 globalAlpha屬性
12.3 globalComposite屬性
12.4 stroke()和fill()

第二部分 Canvas進階

第13章 事件操作
13.1 Canvas動畫簡介
13.2 鼠標事件
13.2.1 什麼是鼠標事件
13.2.2 獲取鼠標位置
13.3 鍵盤事件
13.3.1 什麼是鍵盤事件
13.3.2 獲取物體移動方向
13.4 循環事件

第14章 物理動畫
14.1 物理動畫簡介
14.2 三角函數簡介
14.2.1 什麼是三角函數
14.2.2 Math-atan()與atan2()
14.3 三角函數應用
14.3.1 兩點間的距離
14.3.2 圓周運動
14.3.3 波形運動
14.4 勻速運動
14.4.1 什麼是勻速運動
14.4.2 速度的合成和分解
14.5 加速運動
14.5.1 什麼是加速運動
14.5.2 加速度的合成和分解
14.6 重力
14.6.1 什麼是重力
14.6.2 重力的應用
14.7 摩擦力

第15章 邊界檢測
15.1 邊界檢測簡介
15.2 邊界限制
15.3 邊界環繞
15.4 邊界生成
15.5 邊界反彈

第16章 碰撞檢測
16.1 碰撞檢測簡介
16.2 外接矩形判定法
16.3 外接圓判定法
16.4 多物體碰撞
16.4.1 排列組合
16.4.2 多物體碰撞

第17章 用戶交互
17.1 用戶交互簡介
17.2 捕獲物體
17.2.1 什麼是捕獲物體
17.2.2 捕獲靜止物體
17.2.3 捕獲運動物體
17.3 拖拽物體
17.4 拋擲物體

第18章 高級動畫
18.1 高級動畫簡介
18.2 緩動動畫簡介
18.3 緩動動畫應用
18.4 彈性動畫簡介
18.5 彈性動畫應用

第19章 Canvas游戲開發
19.1 Canvas游戲開發簡介
19.2 Box2D簡介
19.2.1 Box2D
19.2.2 Box2DWeb
19.3 HTML5游戲引擎

第20章 Canvas圖表庫
20.1 Canvas圖表庫簡介
20.2 ECharts和HightCharts