《Web前端开发精品课：HTML5 Canvas开发详解》源代码

编辑推荐

含金量高 前端精品内容荟萃，强化基础提升实战技能。通俗易懂 语言风格轻松幽默，形象生动讲解枯燥知识。系统学习 掌握前端高级技巧，清晰流畅学习进阶内容。贴近读者 结合自身学习经历，文字极具温度不失严谨。直击痛点 规避开发思维误区，精炼浓缩直指技术本质。

内容简介

全书共分为两大部分，首部分是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