HTML5 Canvas开发详解 Web前端开发精品课

图书标准信息

• 作者 莫振杰 著
• 出版社 人民邮电出版社
• 出版时间 2017-03
• 版次 1
• ISBN 9787115450203
• 定价 79.00元
• 装帧 平装
• 开本 其他
• 纸张 胶版纸
• 页数 338页
• 正文语种 简体中文

【内容简介】

全书共分为两大部分，首部分是Canvas基础内容，主要学习Canvas API语法，其中包括图形绘制、线条操作、文本操作、图片操作、变形操作、像素操作等各种基础API。第二部分是Canvas进阶内容，主要学习Canvas动画开发，包括事件操作、物理动画、边界检测、碰撞检测、高级动画等各种稀有技巧。

除了知识的讲解，教程还融入了大量的开发案例，并且更加注重实战编程思维的培养，为学习者提供一个流畅的学习思路。

【作者简介】

2011~2015就读于暨南大学信科院计算机科学与技术专业，从事前后端开发一年多，开发过绿叶学习网、广州智能工程研究会网站、大量在线应用工具，业余时间阅读大量国内外技术书籍。 现为绿叶学习网（https://www.lvyestudy.com）的站长，该网站用于分享自己在前后端开发中的一些经验，并且制作相关前后端开发的在线教程。这些在线教程在互联网引起广泛关注，极大受到网友推崇。本人编写过大量原创在线教程，每一个教程广受网友称赞与推崇。 ?

已经出版的两本书凭借抓实的内容、清晰的讲解，获得了广大读者的一致好评。

《Web前端开发精品课——HTML与CSS 基础教程》

《Web前端开发精品课 HTML与CSS进阶教程》

【目录】

目　录

第一部分　Canvas基础

第1章　Canvas概述

1．1　Canvas简介 1

1．1．1　Canvas是什么 1

1．1．2　Canvas与SVG 2

1．2　Canvas元素知识 3

1．2．1　Canvas元素 4

1．2．2　Canvas对象 5

第2章　直线图形

2．1　直线图形简介 8

2．2　直线 8

2．2．1　Canvas坐标系 8

2．2．2　直线的绘制 9

2．3　矩形 14

2．3．1 “描边”矩形 15

2．3．2 “填充”矩形 17

2．3．3　rect()方法 20

2．3．4　清空矩形 22

2．4　多边形 25

2．4．1　Canvas绘制箭头 25

2．4．2　Canvas绘制正多边形 26

2．4．3　五角星 29

2．5　训练题：绘制调色板 31

第3章　曲线图形

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()画弧线 42

3．4　二次贝塞尔曲线 47

3．5　三次贝塞尔曲线 50

3．6　训练题：绘制扇形 53

第4章　线条操 作

4．1　线条操作 57

4．2　lineWidth属性 58

4．3　lineCap属性 60

4．4　lineJoin属性 63

4．5　setLineDash()方法 65

第5章　文本操作

5．1　文本操作简介 67

5．2　文本操作“方法” 68

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章　图片操作

6．1　图片操作简介 79

6．2　绘制图片 79

6．2．1　drawImage(image ， dx ， dy) 80

6．2．2　drawImage(image ， dx ， dy ，

dw ， dh) 83

6．2．3　drawImage(image ， sx ， sy ，

sw ，sh， dx ， dy ， dw ， dh) 84

6．3　平铺图片 86

6．4　切割图片 89

6．5　深入图片操作 92

第7章　变形操作

7．1　变形操作简介 95

7．2　图形平移 96

7．2．1　translate()方法 96

7．2．2　clearRect()方法清空

Canvas 99

7．3　图形缩放 100

7．3．1　scale()方法 100

7．3．2　scale()方法的负作用 103

7．4　图形旋转 105

7．4．1　rotate()方法 105

7．4．2　改变旋转中心 108

7．5　变换矩阵 109

7．5．1　transform()方法 109

7．5．2　setTransform()方法 114

7．6　深入变形操作 116

7．7　训练题：绘制绚丽的图形 117

7．8　训练题：绘制彩虹 119

第8章　像素操作

8．1　像素操作简介 121

8．1．1　getImageData()方法 121

8．1．2　putImageData()方法 122

8．2　反转效果 123

8．3　黑白效果 126

8．4　亮度效果 130

8．5　复古效果 131

8．6　红色蒙版 133

8．7　透明处理 136

8．8　createImageData()方法 137

第9章　渐变与阴影

9．1　线性渐变 141

9．2　径向渐变 145

9．3　阴影 150

第10章　Canvas路径

10．1　路径简介 156

10．2　beginPath()方法和

closePath()方法 156

10．2．1　beginPath()方法 157

10．2．2　closePath()方法 160

10．3　isPointInPath()方法 165

第11章　Canvas状态

11．1　状态简介 168

11．2　clip()方法 168

11．3　save()方法和restore()方法 171

11．3．1　图形或图片剪切 172

11．3．2　图形或图片变形 174

11．3．3　状态属性的改变 176

第12章　其他应用

12．1　Canvas对象 178

12．1．1　Canvas对象属性 178

12．1．2　Canvas对象方法 180

12．2　globalAlpha属性 182

12．3　globalCompositeOperation

属性 183

12．4　stroke()和fill() 187

第二部分　Canvas进阶

第13章　事件操作

13．1　Canvas动画简介 191

13．2　鼠标事件 192

13．2．1　什么是鼠标事件 192

13．2．2　获取鼠标位置 192

13．3　键盘事件 195

13．3．1　什么是键盘事件 195

13．3．2　获取物体移动方向 195

13．4　循环事件 199

第14章　物理动画

14．1　物理动画简介 202

14．2　三角函数简介 203

14．2．1　什么是三角函数 203

14．2．2　Math．atan()与Math．

atan2() 204

14．3　三角函数应用 210

14．3．1　两点间的距离 210

14．3．2　圆周运动 212

14．3．3　波形运动 217

14．4　匀速运动 222

14．4．1　什么是匀速运动 222

14．4．2　速度的合成和分解 224

14．5　加速运动 227

14．5．1　什么是加速运动 227

14．5．2　加速度的合成和分解 231

14．6　重力 233

14．6．1　什么是重力 233

14．6．2　重力的应用 235

14．7　摩擦力 238

第15章　边界检测

15．1　边界检测简介 241

15．2　边界限制 242

15．3　边界环绕 245

15．4　边界生成 250

15．5　边界反弹 256

第16章　碰撞检测

16．1　碰撞检测简介 262

16．2　外接矩形判定法 262

16．3　外接圆判定法 271

16．4　多物体碰撞 275

16．4．1　排列组合 275

16．4．2　多物体碰撞 275

第17章　用户交互

17．1　用户交互简介 283

17．2　捕获物体 284

17．2．1　什么是捕获物体 284

17．2．2　捕获静止物体 285

17．2．3　捕获运动物体 287

17．3　拖拽物体 291

17．4　抛掷物体 297

第18章　高级动画

18．1　高级动画简介 306

18．2　缓动动画简介 306

18．3　缓动动画应用 313

18．4　弹性动画简介 317

18．5　弹性动画应用 323

第19章　Canvas游戏开发

19．1　Canvas游戏开发简介 327

19．2　Box2D简介 328

19．2．1　Box2D 328

19．2．2　Box2DWeb 328

19．3　HTML5游戏引擎 331

第20章　Canvas图表库

20．1　Canvas图表库简介 334

20．2　ECharts和HightCharts 336