描述
开 本: 16开纸 张: 胶版纸包 装: 平装-胶订是否套装: 否国际标准书号ISBN: 9787115450203
产品特色
编辑推荐
含金量高 前端精品内容荟萃,强化基础提升实战技能。
通俗易懂 语言风格轻松幽默,形象生动讲解枯燥知识。
系统学习 掌握前端高级技巧,清晰流畅学习进阶内容。
贴近读者 结合自身学习经历,文字极具温度不失严谨。
直击痛点 规避开发思维误区,精炼浓缩直指技术本质。
通俗易懂 语言风格轻松幽默,形象生动讲解枯燥知识。
系统学习 掌握前端高级技巧,清晰流畅学习进阶内容。
贴近读者 结合自身学习经历,文字极具温度不失严谨。
直击痛点 规避开发思维误区,精炼浓缩直指技术本质。
内容简介
全书共分为两大部分,分是Canvas基础内容,主要学习Canvas API语法,其中包括图形绘制、线条操作、文本操作、图片操作、变形操作、像素操作等各种基础API。第二部分是Canvas进阶内容,主要学习Canvas动画开发,包括事件操作、物理动画、边界检测、碰撞检测、高级动画等各种稀有技巧。
除了知识的讲解,教程还融入了大量的开发案例,并且更加注重实战编程思维的培养,为学习者提供一个流畅的学习思路。
除了知识的讲解,教程还融入了大量的开发案例,并且更加注重实战编程思维的培养,为学习者提供一个流畅的学习思路。
目 录
目 录
部分 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
部分 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
媒体评论
● 这本书不仅涵盖了Canvas所有基础知识,还
扩展到色彩处理、动画开发、边界检测、碰撞
检测等核心内容,这些都是锻炼思维和提高
前端水平的重要知识,值得一读!
● 作者有着自己非常独特的写作风格,往往一
句话就可以一针见血地指出技术的本质。思路
极其清晰,语言轻松幽默。市面上大多数技术
书籍都是机械地讲解, 这本书是真正站在
“ 人” 的角度来展开的。真是很走心的一
本书。
● 《Web前端开发精品课》系列我都看过,
质量是非常高的,本书同样如此。Canvas
方面的
扩展到色彩处理、动画开发、边界检测、碰撞
检测等核心内容,这些都是锻炼思维和提高
前端水平的重要知识,值得一读!
● 作者有着自己非常独特的写作风格,往往一
句话就可以一针见血地指出技术的本质。思路
极其清晰,语言轻松幽默。市面上大多数技术
书籍都是机械地讲解, 这本书是真正站在
“ 人” 的角度来展开的。真是很走心的一
本书。
● 《Web前端开发精品课》系列我都看过,
质量是非常高的,本书同样如此。Canvas
方面的
评论
还没有评论。