HTML5 canvas基础教程 PDF 高清版

内容简介

《HTML5Canvas基础教程》从HTML5和JavaScript（以及jQuery）的基础知识讲起，全面介绍了HTML5Canvas的各种特性，包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态，以及变形、合成、处理图像和视频等，让读者对Canvas建立起完整的认识。随后讨论了动画循环、记忆形状、模拟运动、碰撞检测等基本而又重要的概念，带领读者温习了必要的数学和物理知识。通过带领读者动手开发“太空保龄球”和“躲避小行星”这两款小游戏，让读者掌握开发游戏的基本流程，学会响应用户操作、创造虚拟环境、循环利用对象、设计计分系统等游戏开发必备的知识。《HTML5Canvas基础教程》适合各层次Web设计及开发人员阅读。

目录

• 第1章HTML5简介1
• 1.1HTML简史1
• 1.2为什么需要HTML52
• 1.2.1问题2
• 1.2.2解决问题2
• 1.3HTML5的新特性3
• 1.3.1结构和内容元素3
• 1.3.2表单6
• 1.3.3媒体元素7
• 1.4剖析HTML5页面的结构11
• 1.5对HTML5的误解16
• 1.5.1CSS3误解16
• 1.5.2WebFonts误解17
• 1.5.3Geolocation误解17
• 1.5.4SVG误解17
• 1.5.5WebStorage误解18
• 1.5.6WebWorkers误解18
• 1.5.7WebSocket误解18
• 1.6小结19
• 第2章JavaScript基础20
• 2.1JavaScript概述20
• 2.2jQuery21
• 2.2.1jQuery是什么21
• 2.2.2为什么要使用它21
• 2.2.3这是在误导你吗22
• 2.2.4是否不需要理解纯JavaScript22
• 2.2.5如何使用jQuery22
• 2.3在HTML页面上添加JavaScript23
• 2.4在页面加载之后运行JavaScript25
• 2.4.1错误的方法（window.onload事件）26
• 2.4.2冗长的方法（DOM）26
• 2.4.3简单的方法（jQuery方法）27
• 2.5变量与数据类型28
• 2.5.1变量28
• 2.5.2数据类型32
• 2.6条件语句33
• 2.6.1if语句33
• 2.6.2比较运算符34
• 2.6.3在if语句中进行多重布尔值检查35
• 2.6.4else和elseif语句35
• 2.7函数36
• 2.7.1创建函数36
• 2.7.2调用函数37
• 2.8对象38
• 2.8.1什么是对象38
• 2.8.2创建和使用对象38
• 2.9数组40
• 2.9.1创建数组40
• 2.9.2访问和修改数组41
• 2.10循环41
• 2.11定时器43
• 2.11.1设置一次性定时器43
• 2.11.2取消一次性定时器43
• 2.11.3设置重复定时器43
• 2.11.4取消重复定时器44
• 2.12DOM44
• 2.12.1HTML网页示例44
• 2.12.2使用纯JavaScript访问DOM45
• 2.12.3使用jQuery访问DOM46
• 2.12.4操作DOM46
• 2.13小结47
• 第3章Canvas基础知识48
• 3.1认识canvas元素48
• 3.22D渲染上下文49
• 3.2.1坐标系统49
• 3.2.2访问2D渲染上下文50
• 3.3绘制基本图形和线条51
• 3.3.1线条53
• 3.3.2圆形54
• 3.4样式58
• 3.5绘制文本62
• 3.6擦除Canvas65
• 3.7使Canvas填满浏览器窗口69
• 3.8小结71
• 第4章Canvas高级功能72
• 4.1保存和恢复绘图状态72
• 4.1.1画布绘图状态是什么72
• 4.1.2保存绘图状态73
• 4.1.3恢复绘图状态73
• 4.1.4保存和恢复多个绘图状态75
• 4.2变形76
• 4.2.1平移76
• 4.2.2缩放78
• 4.2.3旋转80
• 4.2.4变换矩阵82
• 4.3合成85
• 4.3.1全局阿尔法值86
• 4.3.2合成操作87
• 4.4阴影91
• 4.5渐变93
• 4.6复杂路径96
• 4.7将画布导出为图像100
• 4.8小结102
• 第5章处理图像和视频103
• 5.1加载图像103
• 5.2调整和裁剪图像105
• 5.2.1调整图像大小105
• 5.2.2裁剪图像106
• 5.2.3阴影108
• 5.3图像变形110
• 5.3.1平移110
• 5.3.2旋转111
• 5.3.3缩放与翻转111
• 5.4访问像素值113
• 5.5从零绘制图像117
• 5.5.1随机绘制像素119
• 5.5.2创建马赛克效果119
• 5.6基本图像效果123
• 5.6.1反转颜色123
• 5.6.2灰度124
• 5.6.3像素化125
• 5.7视频处理127
• 5.7.1创建HTML5video元素127
• 5.7.2使用HTML5videoAPI128
• 5.7.3设置画布129
• 5.8小结133
• 第6章制作动画134
• 6.1画布中的动画134
• 6.2创建动画循环135
• 6.2.1循环135
• 6.2.2更新、清除、绘制137
• 6.3记忆要绘制的形状138
• 6.3.1错误的方法138
• 6.3.2正确的方法139
• 6.3.3随机产生形状142
• 6.4改变方向143
• 6.5圆周运动144
• 6.5.1三角函数145
• 6.5.2综合运用148
• 6.6反弹150
• 6.7小结154
• 第7章实现高级动画155
• 7.1物理常识155
• 7.1.1什么是物理学155
• 7.1.2物理学对创建动画有何作用156
• 7.1.3基本概念156
• 7.1.4牛顿运动定律157
• 7.2运用物理知识创建动画158
• 7.2.1准备工作158
• 7.2.2速度161
• 7.2.3添加边界163
• 7.2.4加速度163
• 7.2.5摩擦力165
• 7.3碰撞检测166
• 7.3.1碰撞检测167
• 7.3.2弹开物体170
• 7.3.3动量守恒173
• 7.4小结175
• 第8章太空保龄球游戏176
• 8.1游戏概述176
• 8.2核心功能177
• 8.2.1构建HTML代码177
• 8.2.2美化界面180
• 8.2.3编写JavaScript代码182
• 8.3激活用户界面183
• 8.4创建游戏对象185
• 8.4.1创建平台185
• 8.4.2创建小行星187
• 8.4.3创建玩家使用的小行星190
• 8.4.4更新UI191
• 8.5让对象运动起来191
• 8.6检测用户交互195
• 8.6.1建立事件监听器195
• 8.6.2选中玩家使用的小行星196
• 8.6.3增加力度197
• 8.6.4让玩家使用的小行星动起来198
• 8.6.5可视化用户输入199
• 8.7重置player200
• 8.8玩家获胜201
• 8.8.1更新分数201
• 8.8.2从平台上删除小行星202
• 8.9小结205
• 第9章躲避小行星游戏206
• 9.1游戏概述206
• 9.2核心功能207
• 9.2.1创建HTML代码207
• 9.2.2美化界面209
• 9.2.3编写JavaScript代码211
• 9.3创建游戏对象213
• 9.3.1创建小行星213
• 9.3.2创建玩家使用的火箭215
• 9.4检测键盘输入216
• 9.4.1键值216
• 9.4.2键盘事件216
• 9.5让对象运动起来218
• 9.6假造横向卷轴效果223
• 9.6.1循环利用小行星223
• 9.6.2添加边界223
• 9.6.3让玩家保持连续移动224
• 9.7添加声音224
• 9.8结束游戏226
• 9.8.1计分系统226
• 9.8.2杀死玩家228
• 9.9增加游戏难度230
• 9.10小结231
• 第10章未来的Canvas232
• 10.1Canvas与SVG232
• 10.1.1可访问性233
• 10.1.2位图与矢量图233
• 10.2Canvas与Flash234
• 10.2.1JavaScript开发人员可以借鉴Flash234
• 10.2.2Canvas没有像Flash那样用户友好的编辑器
• 235
• 10.3Canvas与性能236
• 10.4Canvas游戏和动画库236
• 10.5三维图形238
• 10.6与外围设备交互239
• 10.7用WebSocket技术构建多人游戏240
• 10.8灵感241
• 10.8.1SketchOut游戏241
• 10.8.2Z-Type游戏242
• 10.8.3Sinuous游戏242
• 10.9小结和结束语243