目錄
第一部分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 箭頭
2.4.2 正多邊形
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, dy, dw, dh)
6.2.3 drawImage(image, sx, sy, sw, 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 globalCompositeOperation屬性
12.4 strokeStyle和fillStyle
第二部分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()與Math.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