第 一部分　Canvas 基礎(chǔ) 第　1 章 Canvas 概述　3 1.1　Canvas 是什么　3 1.1.1　Canvas 簡(jiǎn)介　3 1.1.2　Canvas 與SVG　5 1.2　Canvas 元素　5 1.2.1　Canvas 元素簡(jiǎn)介　6 1.2.2　Canvas 對(duì)象　8 第　2 章 直線圖形　10 2.1　直線圖形簡(jiǎn)介　10 2.2　直線　10 2.2.1　Canvas 坐標(biāo)系　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　實(shí)戰(zhàn)題：繪制調(diào)色板　31 第3　章 曲線圖形　34 3.1　曲線圖形簡(jiǎn)介　34 3.2　圓形　34 3.2.1　圓形簡(jiǎn)介　34 3.2.2　描邊圓　35 3.2.3　填充圓　38 3.3　弧線　39 3.3.1　arc() 方法畫(huà)弧線　39 3.3.2　arcTo() 方法畫(huà)弧線　43 3.4　二次貝塞爾曲線　47 3.5　三次貝塞爾曲線　50 3.6　實(shí)戰(zhàn)題：繪制扇形　54 第4　章 線條操作　57 4.1　線條操作簡(jiǎn)介　57 4.2　lineWidth 屬性　57 4.3　lineCap 屬性　60 4.4　lineJoin 屬性　63 4.5　setLineDash() 方法　65 第5　章 文本操作　67 5.1　文本操作簡(jiǎn)介　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　圖片操作簡(jiǎn)介　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　變形操作簡(jiǎn)介　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() 方法的負(fù)作用　103 7.4　圖形旋轉(zhuǎn)　104 7.4.1　rotate() 方法　104 7.4.2　改變旋轉(zhuǎn)中心　107 7.5　變換矩陣　108 7.5.1　transform() 方法　108 7.5.2　setTransform() 方法　113 7.6　深入變形操作　115 7.7　實(shí)戰(zhàn)題：繪制絢麗的圖形　117 7.8　實(shí)戰(zhàn)題：繪制彩虹　118 第8　章 像素操作　120 8.1　像素操作簡(jiǎn)介　120 8.1.1　getImageData() 方法　120 8.1.2　putImageData() 方法　121 8.2　反轉(zhuǎn)效果　122 8.3　黑白效果　125 8.4　亮度效果　128 8.5　復(fù)古效果　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 狀態(tài)　164 11.1　什么是狀態(tài)　164 11.2　clip() 方法　164 11.3　save() 方法和restore() 方法　167 11.3.1　圖形或圖片剪切　168 11.3.2　圖形或圖片變形　170 11.3.3　狀態(tài)屬性的改變　172 第　12 章 其他應(yīng)用　175 12.1　Canvas 對(duì)象　175 12.1.1　Canvas 對(duì)象屬性　175 12.1.2　Canvas 對(duì)象方法　177 12.2　globalAlpha 屬性　179 12.3　globalCompositeOperation 屬性　180 12.4　strokeStyle 和fillStyle　184 第二部分　Canvas 進(jìn)階 第　13 章 事件操作　191 13.1　Canvas 進(jìn)階簡(jiǎn)介　191 13.2　鼠標(biāo)事件　191 13.2.1　鼠標(biāo)事件簡(jiǎn)介　191 13.2.2　獲取鼠標(biāo)指針位置　192 13.3　鍵盤(pán)事件　194
從0 到1 系列圖書(shū) 目錄　2 13.3.1　鍵盤(pán)事件簡(jiǎn)介　194 13.3.2　獲取物體移動(dòng)方向　195 13.4　循環(huán)事件　198 第　14 章 物理動(dòng)畫(huà)　201 14.1　物理動(dòng)畫(huà)簡(jiǎn)介　201 14.2　三角函數(shù)簡(jiǎn)介　202 14.2.1　什么是三角函數(shù)　202 14.2.2　Math.atan() 與Math.atan2()　203 14.3　三角函數(shù)應(yīng)用　208 14.3.1　兩點(diǎn)間距離　208 14.3.2　圓周運(yùn)動(dòng)　210 14.3.3　波形運(yùn)動(dòng)　215 14.4　勻速運(yùn)動(dòng)　220 14.4.1　勻速運(yùn)動(dòng)簡(jiǎn)介　220 14.4.2　速度的合成和分解　221 14.5　加速運(yùn)動(dòng)　225 14.5.1　加速運(yùn)動(dòng)簡(jiǎn)介　225 14.5.2　加速度的合成和分解　228 14.6　重力　230 14.6.1　重力簡(jiǎn)介　230 14.6.2　重力應(yīng)用　231 14.7　摩擦力　235 第　15 章 邊界檢測(cè)　238 15.1　邊界檢測(cè)簡(jiǎn)介　238 15.2　邊界限制　239 15.3　邊界環(huán)繞　241 15.4　邊界生成　246 15.5　邊界反彈　252 第　16 章 碰撞檢測(cè)　257 16.1　碰撞檢測(cè)簡(jiǎn)介　257 16.2　外接矩形判定法　257 16.3　外接圓判定法　265 16.4　多物體碰撞　269 16.4.1　排列組合　269 16.4.2　多物體碰撞　270 第　17 章 用戶交互　277 17.1　用戶交互簡(jiǎn)介　277 17.2　捕獲物體　277 17.2.1　捕獲物體簡(jiǎn)介　277 17.2.2　捕獲靜止物體　279 17.2.3　捕獲運(yùn)動(dòng)物體　281 17.3　拖曳物體　285 17.4　拋擲物體　290 第　18 章 高級(jí)動(dòng)畫(huà)　299 18.1　高級(jí)動(dòng)畫(huà)簡(jiǎn)介　299 18.2　緩動(dòng)動(dòng)畫(huà)簡(jiǎn)介　299 18.3　緩動(dòng)動(dòng)畫(huà)應(yīng)用　306 18.4　彈性動(dòng)畫(huà)簡(jiǎn)介　310 18.5　彈性動(dòng)畫(huà)應(yīng)用　314 第　19 章 Canvas 游戲開(kāi)發(fā)　319 19.1　Canvas 游戲開(kāi)發(fā)簡(jiǎn)介　319 19.2　Box2D 簡(jiǎn)介　320 19.2.1　Box2D　320 19.2.2　Box2DWeb　320 19.3　HTML5 游戲引擎　323 第　20 章 Canvas 圖表庫(kù)　326 20.1　Canvas 圖表庫(kù)簡(jiǎn)介　326 20.2　ECharts 和HightCharts　327