从0到1 HTML5 Canvas动画开发(全彩印刷)

第 一部分　Canvas 基础

第　1 章 Canvas 概述　3

1.1　Canvas 是什么　3

1.1.1　Canvas 简介　3

1.1.2　Canvas 与SVG　5

1.2　Canvas 元素　5

1.2.1　Canvas 元素简介　6

1.2.2　Canvas 对象　8

第　2 章 直线图形　10

2.1　直线图形简介　10

2.2　直线　10

2.2.1　Canvas 坐标系　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　实战题：绘制调色板　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.1　arc() 方法画弧线　39

3.3.2　arcTo() 方法画弧线　43

3.4　二次贝塞尔曲线　47

3.5　三次贝塞尔曲线　50

3.6　实战题：绘制扇形　54

第4　章 线条操作　57

4.1　线条操作简介　57

4.2　lineWidth 属性　57

4.3　lineCap 属性　60

4.4　lineJoin 属性　63

4.5　setLineDash() 方法　65

第5　章 文本操作　67

5.1　文本操作简介　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　图片操作简介　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　变形操作简介　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() 方法的负作用　103

7.4　图形旋转　104

7.4.1　rotate() 方法　104

7.4.2　改变旋转中心　107

7.5　变换矩阵　108

7.5.1　transform() 方法　108

7.5.2　setTransform() 方法　113

7.6　深入变形操作　115

7.7　实战题：绘制绚丽的图形　117

7.8　实战题：绘制彩虹　118

第8　章 像素操作　120

8.1　像素操作简介　120

8.1.1　getImageData() 方法　120

8.1.2　putImageData() 方法　121

8.2　反转效果　122

8.3　黑白效果　125

8.4　亮度效果　128

8.5　复古效果　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 状态　164

11.1　什么是状态　164

11.2　clip() 方法　164

11.3　save() 方法和restore() 方法　167

11.3.1　图形或图片剪切　168

11.3.2　图形或图片变形　170

11.3.3　状态属性的改变　172

第　12 章 其他应用　175

12.1　Canvas 对象　175

12.1.1　Canvas 对象属性　175

12.1.2　Canvas 对象方法　177

12.2　globalAlpha 属性　179

12.3　globalCompositeOperation 属性　180

12.4　strokeStyle 和fillStyle　184

第二部分　Canvas 进阶

第　13 章 事件操作　191

13.1　Canvas 进阶简介　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.2　Math.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.1　Canvas 游戏开发简介　319

19.2　Box2D 简介　320

19.2.1　Box2D　320

19.2.2　Box2DWeb　320

19.3　HTML5 游戏引擎　323

第　20 章 Canvas 图表库　326

20.1　Canvas 图表库简介　326

20.2　ECharts 和HightCharts　327