HTML5 Canvas基础教程

出版时间：2012-1  出版社：人民邮电出版社  作者：Rob Hawkes  页数：243  译者：周广新,曾少宁,盛海艳　等  
Tag标签：无  

内容概要

　 《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）。

书籍目录

第1章 HTML5简介　
1.1 HTML简史　
1.2 为什么需要HTML5　
1.2.1 问题　
1.2.2 解决问题　
1.3 HTML5的新特性　
1.3.1 结构和内容元素　
1.3.2 表单　
1.3.3 媒体元素　
1.4 剖析HTML5页面的结构　
1.5 对HTML5的误解　
1.5.1 CSS3误解　
1.5.2 Web Fonts误解　
1.5.3 Geolocation误解　
1.5.4 SVG误解　
1.5.5 Web Storage误解　
1.5.6 Web Workers误解　
1.5.7 WebSocket误解　
1.6 小结　
第2章 JavaScript基础　
2.1 JavaScript概述　
2.2 jQuery　
2.2.1 jQuery是什么　
2.2.2 为什么要使用它　
2.2.3 这是在误导你吗　
2.2.4 是否不需要理解纯JavaScript　
2.2.5 如何使用jQuery　
2.3 在HTML页面上添加JavaScript　
2.4 在页面加载之后运行JavaScript　
2.4.1 错误的方法(window.onload事件)　
2.4.2 冗长的方法(DOM)　
2.4.3 简单的方法(jQuery方法)　
2.5 变量与数据类型　
2.5.1 变量　
2.5.2 数据类型　
2.6 条件语句　
2.6.1 if语句　
2.6.2 比较运算符　
2.6.3 在if语句中进行多重布尔值检查　
2.6.4 else和else if语句　
2.7 函数　
2.7.1 创建函数　
2.7.2 调用函数　
2.8 对象　
2.8.1 什么是对象　
2.8.2 创建和使用对象　
2.9 数组　
2.9.1 创建数组　
2.9.2 访问和修改数组　
2.10 循环　
2.11 定时器　
2.11.1 设置一次性定时器　
2.11.2 取消一次性定时器　
2.11.3 设置重复定时器　
2.11.4 取消重复定时器　
2.12 DOM　
2.12.1 HTML网页示例　
2.12.2 使用纯JavaScript访问DOM　
2.12.3 使用jQuery访问DOM　
2.12.4 操作DOM　
2.13 小结　
第3章 Canvas基础知识　
3.1 认识canvas元素　
3.2 2D渲染上下文　
3.2.1 坐标系统　
3.2.2 访问2D渲染上下文　
3.3 绘制基本图形和线条　
3.3.1 线条　
3.3.2 圆形　
3.4 样式　
3.5 绘制文本　
3.6 擦除Canvas　
3.7 使Canvas填满浏览器窗口　
3.8 小结　
第4章 Canvas高级功能　
4.1 保存和恢复绘图状态　
4.1.1 画布绘图状态是什么　
4.1.2 保存绘图状态　
4.1.3 恢复绘图状态　
4.1.4 保存和恢复多个绘图状态　
4.2 变形　
4.2.1 平移　
4.2.2 缩放　
4.2.3 旋转　
4.2.4 变换矩阵　
4.3 合成　
4.3.1 全局阿尔法值　
4.3.2 合成操作　
4.4 阴影　
4.5 渐变　
4.6 复杂路径　
4.7 将画布导出为图像　
4.8 小结　
第5章 处理图像和视频　
5.1 加载图像　
5.2 调整和裁剪图像　
5.2.1 调整图像大小　
5.2.2 裁剪图像　
5.2.3 阴影　
5.3 图像变形　
5.3.1 平移　
5.3.2 旋转　
5.3.3 缩放与翻转　
5.4 访问像素值　
5.5 从零绘制图像　
5.5.1 随机绘制像素　
5.5.2 创建马赛克效果　
5.6 基本图像效果　
5.6.1 反转颜色　
5.6.2 灰度　
5.6.3 像素化　
5.7 视频处理　
5.7.1 创建HTML5video元素　
5.7.2 使用HTML5video API　
5.7.3 设置画布　
5.8 小结　
第6章 制作动画　
6.1 画布中的动画　
6.2 创建动画循环　
6.2.1 循环　
6.2.2 更新、清除、绘制　
6.3 记忆要绘制的形状　
6.3.1 错误的方法　
6.3.2 正确的方法　
6.3.3 随机产生形状　
6.4 改变方向　
6.5 圆周运动　
6.5.1 三角函数　
6.5.2 综合运用　
6.6 反弹　
6.7 小结　
第7章 实现高级动画　
7.1 物理常识　
7.1.1 什么是物理学　
7.1.2 物理学对创建动画有何作用　
7.1.3 基本概念　
7.1.4 牛顿运动定律　
7.2 运用物理知识创建动画　
7.2.1 准备工作　
7.2.2 速度　
7.2.3 添加边界　
7.2.4 加速度　
7.2.5 摩擦力　
7.3 碰撞检测　
7.3.1 碰撞检测　
7.3.2 弹开物体　
7.3.3 动量守恒　
7.4 小结　
第8章 太空保龄球游戏　
8.1 游戏概述　
8.2 核心功能　
8.2.1 构建HTML代码　
8.2.2 美化界面　
8.2.3 编写JavaScript代码　
8.3 激活用户界面　
8.4 创建游戏对象　
8.4.1 创建平台　
8.4.2 创建小行星　
8.4.3 创建玩家使用的小行星　
8.4.4 更新UI　
8.5 让对象运动起来　
8.6 检测用户交互　
8.6.1 建立事件监听器　
8.6.2 选中玩家使用的小行星　
8.6.3 增加力度　
8.6.4 让玩家使用的小行星动起来　
8.6.5 可视化用户输入　
8.7 重置player　
8.8 玩家获胜　
8.8.1 更新分数　
8.8.2 从平台上删除小行星　
8.9 小结　
第9章 躲避小行星游戏　
9.1 游戏概述　
9.2 核心功能　
9.2.1 创建HTML 代码　
9.2.2 美化界面　
9.2.3 编写JavaScript代码　
9.3 创建游戏对象　
9.3.1 创建小行星　
9.3.2 创建玩家使用的火箭　
9.4 检测键盘输入　
9.4.1 键值　
9.4.2 键盘事件　
9.5 让对象运动起来　
9.6 假造横向卷轴效果　
9.6.1 循环利用小行星　
9.6.2 添加边界　
9.6.3 让玩家保持连续移动　
9.7 添加声音　
9.8 结束游戏　
9.8.1 计分系统　
9.8.2 杀死玩家　
9.9 增加游戏难度　
9.10 小结　
第10章 未来的Canvas　
10.1 Canvas与SVG　
10.1.1 可访问性　
10.1.2 位图与矢量图　
10.2 Canvas与Flash　
10.2.1 JavaScript开发人员可以借鉴Flash　
10.2.2 Canvas没有像Flash那样用户友好的编辑器　
10.3 Canvas与性能　
10.4 Canvas游戏和动画库　
10.5 三维图形　
10.6 与外围设备交互　
10.7 用WebSocket技术构建多人游戏　
10.8 灵感　
10.8.1 Sketch Out游戏　
10.8.2 Z-Type游戏　
10.8.3 Sinuous游戏　
10.9 小结和结束语　

章节摘录

版权页：   插图：   7.1.2物理学对创建动画有何作用 理解了物理学，你就能够创建更加逼真和具有动态效果的动画。也许现在你还无法明显感受到这一点。无论是使用速度、加速度这些简单概念，还是构建一个包含不同方向作用力的完善系统，通过学习物理学，我们才能真实而全面地展现动画效果。物理学概念不仅是制作逼真动画的基础，它们还是在各种动画（从游戏和数据可视化一直到卡通和电影）中经过反复验证的概念。 7.1.3基本概念 学习物理的关键是了解一些基本术语和单位，因为在一些较复杂的概念中通常要使用它们。虽然你不一定会用到所有术语，但简要了解它们有益于日后学习。这样，在后面的代码中用到这些术语时，你会更明确它们的意义。 1.力 力是作用于物体的推力或拉力。它会使物体改变速率、方向或形状。力既有数量（大小或距离）也有方向，这说明可以把力看作矢量（vector）。力的单位是牛顿（N）。 2.矢量 矢量是具有大小和方向的量（如力）。矢量可以用图形来表示，通常用一条从原点出发并指向终点的线段来表示。其中，长度代表矢量的大小，箭头表示矢量的方向。 3.质量 质量是一种阻碍物体在力的作用下加速的物理量，也用来衡量惯性。当力作用于物体时，质量将直接影响加速度的大小。例如，相同的力作用于质量不同的两个物体，则质量较大的物体的加速度小于质量较小的物体的加速度。质量的单位是千克（kg）。 4.重力 物体的质量受另一个物体引力的作用而产生的力称为重力。重力是物体存在重量的原因。重力的计算方法是：将物体的质量乘以地球引力。因此，地球表面的物体比高空中相同的物体要重一些——高空中的地球引力稍微小一些。在地球表面，重力通常使用质量的单位（kg），但实际应该使用力的单位：牛顿（N）。 5.摩擦力 摩擦力是一种阻止一个物体沿着另一个物体表面运动的力。正是由于摩擦力的存在，相对于地毯之类的物体，冰才显得更光滑一些。

编辑推荐

《HTML 5 Canvas基础教程》的行文通俗易懂，既贴近初学者，也同样适合专业人员。那些希望将知识面拓宽到Web和移动设备上的Flash和Silverlight开发人员也能从中受益。

用户评论 (总计70条)

•   Canvas作为HTML5的新特性，对于以后的开发有着很大的作用，这本书讲得比较详细。
•   这本书是我看了HTML 5与CSS权威指南之后看的书，我觉得，里面讲canvas的部分，和权威指南略有不同，各有特点，所以我觉得买这本书之前，应该买多一本权威指南。这样对初学者来说会比较适合，还有个地方就是学canvas必须对javascript有所了解，甚至精通最好！
•   基础知识介绍，让我系统了解了Html5的Canvas的一些api
•   html5 canvas基础学习必备。
•   个人很喜欢研究一些算法和前台的华丽效果，相信再过几年中国的HTML5也会普及，同时对新特性之一的Canvas特别感兴趣，希望从这本书里得到些精华。
•   书的纸质很好，对于学canvas很有帮助，学html5必学canvas
•   这本书不错，之前买了本 html5+css3的，好像是国内编写的。 评论500多条。我也兴奋的买了。 刚买到，就直接退货了。什么书啊是。
  但是这本我看了下，不错的。 本人极力推荐这本书，写的很好
•   以Cancas为切入点，迅速延伸到HTML5的各个角落，着实不错
•   学HTML5必学的一个绘图标签，内容充实，合理，赞一个
•   初学Canvas看这本书完全没错，可读性非常高。
  作者写得内容被很完美的翻译过来，我不仅要向作者致敬还要向译者致敬。
  完全的将书中精髓部分全部翻译出来，而且翻译的非常有灵魂。
  由衷的感谢！
•   很适合Canvas入门的朋友！
•   少有的专门介绍canvas的书籍
•   canvas ji chu zhi shi ,
•   还没开始仔细看，大概上翻看了一下，是从游戏的实例入手讲解的，需要些JavaScript基础，可惜没有习题。
•   是比较偏游戏
•   基础知识打下基础
•   书如其名，只是基础，适合初学者的一本书
•   这本书还行，基础介绍
•   对专业知识的提高，和进一步学习非常有帮助。
•   现在正在学习这方面的技术，看了一下，书的内容很详细，描述也相当清晰！
•   内容相对比较浅显易懂，最主要是看看里面的例子，动手写写
•   看了一半，语言显浅易懂，适合入门。建议初学者阅读
•   还正在读，前面还可以，后面未读
•   刚买未读
•   这种书是我第一次接触，要好好的读读了，虽然没仔细看，但书的质量还是不错，很满意……
•   最近做这方面的研究，我想它会帮助我的。
•   非常不错的一本书，非常值得推荐
•   不错，要是有光盘就更好了。
•   速度很快,第二天就到了.内容暂时还没有仔细研究
•   很有用，图灵的书一向都很好
•   不错，虽然很薄，内容不错，语言通俗易懂
•   好难，搞半天搞不懂，到货很快，谢谢！
•   这是一本非常适合了解 Html 动画技术的入门书籍 浅显易懂
•   用这本书，还有《HTML5揭秘》，结合网上的资料，试编了一个HTML5医学图像浏览器。尤其图像仿射变换那一部分，从这本书上学到不少。
•   还不错，满足初步了解HTML5的需求
•   感觉到这本书比较偏重于canvas游戏方面的编程，很少涉及到canvas在不同浏览器上会出现的不兼容问题
•   今天刚收到，作为HTML5代言人的经典之作，坚信能从中学到很多。。。。。
•   主要讲的是Canvas的api及少量代码示例，讲的不错比较详细。不过内容比较单薄，图量较大。
•   比较基础，对初入者很不错
•   还可以的书，基本知识书
•   纸张和内容都很不错，不过只讲了2d的，3d的只是提到了几句话。
•   书是比较薄的，但是包含的内容很多，但是都不是十全十美的。总体感觉不错，如果是想深究的话，那么还是买别的书籍吧。
•   学多少才重要
•   质量还不错，内容不多，应该都是精华吧
•   自己选的还是很喜欢的
•   学这个,还是得从原生js开始
•   看过英文版，买一本收藏
•   书挺好的 书面挺美的，内容也不错
•   短小精悍，HTML5入门书籍
•   适合入门，内容不深，我想看点更多3D方面的内容，可惜没有啊
•   虽说知识是无价的,但也要对得起观众嘛,这种书有关颜色,应该印彩色的.不然都是一些黑白的图上,大截那么大.只看了前面八九页,暂作此评价
•   初学者，感觉写的好
•   刚看两三天，书就开裂了，质量不太好
•   书不错，很值得买，我很喜欢
•   RT，书本身没问题，我严重鄙视的是书的包装竟然是跟其他东西一起就那样装在一个纸箱里面，没有其他包装，人家某当网至少有个袋子吧，重要的是箱子被雨淋湿了，书现在都是皱皱的，以后怎样都不回在亚马逊买书的了
•   文章太水了，介绍的知识太浅显，网上不都有吗，翻译的太奇葩了，不忍直视啊
•   4月15日下单,4月19日才送到,打开包装一看,书本上面盖了一层土书的内容还可以
•   送货蛮快，新手买来学学用的，还不错。
•   据说图灵出品，必是精品。帮盆友买的，据说很好。讲的是比较高端的东西，我是初级，有点看不懂。canvas现在的应用很广泛，不过存在着很多浏览器兼容性的问题，所以，应用还是比较有限的。html5越来越朝着代码、数学、后端的方向发展了。这是我个人的感觉
•   商品包装得很完整，书也很好
•   很好的啊，内容还没有细看，质量挺好的
•   一般的书，讲的不吸引人
•   个人还是很推荐这本书的！
•   太简单了,比较垃圾.浪费时间
•   讲的比较的xi 而且是用juqery来操作canvas 不错
•   大概瞟了一眼，都是基本的介绍，一般般
•   喜欢动画的不要错过
•   TML5 Canvas基础教程
•   html对图像处理 ，功能好像挺强大的
•   不错，刚开始学，看看