编辑推荐
含金量高 前端精品内容荟萃，强化基础提升实战技能。通俗易懂 语言风格轻松幽默，形象生动讲解枯燥知识。系统学习 掌握前端高级技巧，清晰流畅学习进阶内容。贴近读者 结合自身学习经历，文字极具温度不失严谨。直击痛点 规避开发思维误区，精炼浓缩直指技术本质。
内容简介
全书共分为两大部分，首部分是Canvas基础内容，主要学习Canvas API语法，其中包括图形绘制、线条操作、文本操作、图片操作、变形操作、像素操作等各种基础API。第二部分是Canvas进阶内容，主要学习Canvas动画开发，包括事件操作、物理动画、边界检测、碰撞检测、高级动画等各种稀有技巧。除了知识的讲解，教程还融入了大量的开发案例，并且更加注重实战编程思维的培养，为学习者提供一个流畅的学习思路。
作者简介
2011~2015就读于暨南大学信科院计算机科学与技术专业，从事前后端开发一年多，开发过绿叶学习网、广州智能工程研究会网站、大量在线应用工具，业余时间阅读大量国内外技术书籍。 现为绿叶学习网（http: 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
