基本信息
- 原书名:Foundation HTML5 Canvas: For Games and Entertainment
- 原出版社: friendsofED
编辑推荐
国内第一本HTML5 Canvas专著
作者权威,被誉为“HTML5的化身”
学习游戏开发最新Web标准必读
内容简介
书籍 计算机书籍
《HTML5 Canvas基础教程》从HTML5 和JavaScript(以及jQuery)的基础知识讲起,全面介绍了HTML5 Canvas 的各种特性,包括渲染上下文、坐标系统、绘制图形、保存和恢复画布状态,以及变形、合成、处理图像和视频等,让读者对Canvas 建立起完整的认识。随后讨论了动画循环、记忆形状、模拟运动、碰撞检测等基本而又重要的概念,带领读者温习了必要的数学和物理知识。通过带领读者动手开发“太空保龄球”和“躲避小行星”这两款小游戏,让读者掌握开发游戏的基本流程,学会响应用户操作、创造虚拟环境、循环利用对象、设计计分系统等游戏开发必备的知识。
《HTML5 Canvas基础教程》适合各层次Web 设计及开发人员阅读。
作译者
Rob Hawkes,现任Mozilla技术布道师,国际知名的HTML5开发专家,被誉为“HTML5的化身”(Person of HTML5),是名噪一时的“Google弹跳球”图标的HTML5 Canvas实现者。Rob可以说是写着代码长大的,他对设计交互程序如醉如痴,对HTML5及其他Web新技术有着浓厚的兴趣。他曾在伯恩茅斯大学 (Bournemouth University)学习交互媒体制作(Interactive Media Production)。大学未毕业,就已经获得了Mozilla公司的工作机会。他经常活跃在HTML5和游戏开发的各种会议上。
要想了解Rob和他经常参加的会议,可以访问他的网站http://rawkes.com),或者加他的Twitter(@robhawkes)。
目录
《HTML5 Canvas基础教程》
第1 章 HTML5 简介 1
1.1 HTML 简史 1
1.2 为什么需要HTML5 2
1.2.1 问题 2
1.2.2 解决问题 2
1.3 HTML5 的新特性 3
1.3.1 结构和内容元素 3
1.3.2 表单 6
1.3.3 媒体元素 7
1.4 剖析HTML5 页面的结构 11
1.5 对HTML5 的误解 16
1.5.1 CSS3 误解 16
1.5.2 Web Fonts 误解 17
1.5.3 Geolocation 误解 17
1.5.4 SVG 误解 17
1.5.5 Web Storage 误解 18
1.5.6 Web Workers 误解 18
1.5.7 WebSocket 误解 18
1.6 小结 19
第2 章 JavaScript 基础 20
2.1 JavaScript 概述 20
2.2 jQuery 21
2.2.1 jQuery 是什么 21
2.2.2 为什么要使用它 21
2.2.3 这是在误导你吗 22
2.2.4 是否不需要理解纯JavaScript 22
2.2.5 如何使用jQuery 22
2.3 在HTML 页面上添加JavaScript 23
2.4 在页面加载之后运行JavaScript 25
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.1 if 语句 33
2.6.2 比较运算符 34
2.6.3 在if 语句中进行多重布尔值检查 35
2.6.4 else 和else if 语句 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.12 DOM 44
2.12.1 HTML 网页示例 44
2.12.2 使用纯JavaScript 访问DOM 45
2.12.3 使用jQuery 访问DOM 46
2.12.4 操作DOM 46
2.13 小结 47
第3 章 Canvas 基础知识 48
3.1 认识canvas 元素 48
3.2 2D 渲染上下文 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 擦除Canvas 65
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 创建HTML5 video 元素 127
5.7.2 使用HTML5 video API 128
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 更新UI 191
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 重置player 200
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 章 未来的Canvas 232
10.1 Canvas 与SVG 232
10.1.1 可访问性 233
10.1.2 位图与矢量图 233
10.2 Canvas 与Flash 234
10.2.1 JavaScript 开发人员可以借鉴Flash 234
10.2.2 Canvas 没有像Flash 那样用户友好的编辑器 235
10.3 Canvas 与性能 236
10.4 Canvas 游戏和动画库 236
10.5 三维图形 238
10.6 与外围设备交互 239
10.7 用WebSocket 技术构建多人游戏 240
10.8 灵感 241
10.8.1 Sketch Out 游戏 241
10.8.2 Z-Type 游戏 242
10.8.3 Sinuous 游戏 242
10.9 小结和结束语 243
译者序
HTML5指的是万维网(WWW)核心语言HTML的第5个版本。目前,万维网中主要采用的HTML正式版本为1999年发布的4.01版,这个版本在万维网发展过程中发挥了巨大作用。然而,随着万维网从面向文档(Document-Based)的方法向应用(Application)和移动(Mobile)等方向发展,HTML 4.01已经不能满足现代万维网在应用开发和移动性等方面的新需求了,HTML需要在语法、语言和API等方面进行革新,因此,HTML5应运而生。目前,HTML5仍处于草案阶段,但是已经引起了浏览器厂商及Web开发人员的广泛关注,基于这一点,我们看到了它巨大的发展潜力和创新意义。
在HTML5的诸多新特性中,HTML5 Canvas是其中最吸引人的特性之一。它由JavaScript脚本进行控制,可以动态地绘制出各种2D图形,甚至可以对图像像素进行任意处理。目前,HTML5Canvas已经得到了广泛的浏览器支持,包括Mozilla Firefox、Google Chrome、IE、Safari和Opera等在内。而且,有许多的网页游戏厂商和开发者也已经开始使用它来开发网页游戏。我们可以大胆地想象,在不久的将来,采用HTML5开发的无插件网页游戏将广泛流行。
本书是面向游戏和娱乐应用开发的HTML5Canvas图书,它将帮助你掌握先进的下一代网页游戏开发技术。本书共有10章内容,根据讨论的主题可以分成如下5部分。
第1~2章:背景知识。分别讲述HTML5背景知识和JavaScript基础知识,帮助读者了解HTML5的一些基本概念,为读者掌握本书后续内容提供所需要的JavaScript基础知识。
第3~5章:画布。由浅及深地介绍画布的各种概念和使用方法,除了详细的API讲解,书中还穿插了多个实例,帮助读者理解画布的具体开发流程。
第6~7章:动画。分为基础和高级两部分,循序渐进地讲解在逼真的游戏开发中必不可少的动画制作方法。
第8~9章:实例。通过前面学习的Canvas技术,向读者介绍实际开发一个游戏的方法和过程。
第10章:展望。关于一些扩展学习的建议。
正如作者所介绍的,本书既适合初学者学习,也适合高级人员作为参考手册使用,实例和代码齐全。因此,译者在此向广大喜爱和对HTML5技术感兴趣的读者诚意推荐本书。
最后,衷心感谢人民邮电出版社图灵公司各位编辑在翻译工作中给予的帮助和宝贵意见。由于译者水平有限,错误在所难免,恳请读者批评指正。
2011年9月
前言
如果一年前你问我是否会想象自己将来写一本书,我可能会说不会。但是,现在我成为少数撰写HTML5Canvas图书的作者了。我的目标是写一本两年前我刚开始学习Canvas的时候希望看到的书。在我开始学习Canvas时,几乎没有什么关于它的资料。幸好,现在情况比以前好多了。
在过去两年里,我投入了大量时间对Canvas和其他一些刚刚崭露头脚的Web新兴技术进行实验。这些实验包括在2010年9月重新创建了交互式Google圆球标志,使用HTML5 Canvas和Web Socket制作了一个成熟的多人游戏。正是这些实验使我具备了撰写本书和向其他人传授所学技术的知识和经验。
我痴迷于使用Canvas和JavaScript等技术进行动画和游戏开发。我真诚地希望本书能够表达我的这种热情,而且我希望它能够帮助你掌握HTML5 Canvas的使用方法。
读者对象
本书的行文通俗易懂,既贴近初学者,也同样适合专业人员。它主要面向初学HTML5和JavaScript的Web设计人员,内容涉及使用HTML5 Canvas元素进行交互式游戏和应用程序开发的最基础知识。经验丰富的Web设计人员和程序员也能够学习到Canvas的所有特性,以及在项目中使用这些特性的方法。那些希望将知识面拓宽到Web和移动设备上的Flash和Silverlight开发人员也能从中受益。
组织结构
本书从简介开始,引导你理解HTML5和强大的Web新功能。第1章的目标是介绍必要的HTML5背景知识和相关技术。
在了解HTML5基础知识之后,我们将开始学习JavaScript知识。第2章的目标是介绍使用HTML5 Canvas和使用它开发奇妙动画和游戏所需要的各种技术。
第3章是对画布元素的初步认识,你将学习如何使用它来绘制一些基本图形和文本。在这一章中,我希望你开始喜欢上画布及其简单性。
第4章将介绍画布的高级功能。你将学习到如何执行变形及如何绘制复杂图形。你还将学习到如何把在画布上绘制的图形保存为图像。
第5章继续前一章介绍的知识,并在此基础上介绍在画布中处理图像和视频的内容。这是真正开始有趣的部分,我希望你从中真正了解画布的实际运用。
第6章和第7章将更上一层楼,向你介绍如何使用JavaScript和画布实现动画。在这两章中,你将学习动画的基础知识,以及如何运用物理知识使动画更加逼真。
第8章和第9章是本书的高潮部分。这两章将分别介绍HTML5游戏的创建过程,从使用画布开发游戏的核心方面,到用户输入,再到使用HTML5音频添加声音。你在这两章学习的全部知识都是实用的HTML5游戏开发技术。
本书最后将展望画布元素的未来,以及向你介绍如何进行更深入的学习。我希望最后这一章能启发你利用所学的全部知识,并且真正将你的技术水平提高一个层次。
我尽力使本书结构更有条理,使你既能够循序渐进地学习,也可以直接阅读某个具体主题。本书的目标是成为一本利用JavaScript操作和开发动画的教程和参考手册。
本书的所有代码都可以从出版社网站(http://www.apress.com)的本书页面中下载 。
媒体评论
“大爱!如果你想真正理解HTML5 Canvas,学习使用Canvas开发游戏,这本书就是为你写的。虽然书中讲解了不少基础概念,但深入进去就会发现,即使是有经验的开发人员也能够从中得到启发。不要犹豫,坚决拿下!”
——亚马逊读者评价