HTML5 Canvas基础教程

　　Canvas是在桌面、平板和手机上开发跨平台动画和游戏的标准解决方案。而且，它还具备对图像和视频进行像素级操作的能力，这为将来的Web图形和视频处理打开了广阔的空间。学习HTML5，必学Canvas；本书可以为你掌握Canvas开发打下坚实的基础。这是一本真正面向初学者的书。它开篇从HTML5的历史和JavaScript（以及jQuery）的基本概念讲起，即使HTML5和JavaScript新手也可以轻松入门。然后，作者条理清晰、循序渐进地介绍了Canvas的各个方面，包括渲染上下文、坐标系统、画布状态、变形合成，以及高级的图像及视频处理。在此基础上，本书带领读者复习了与创建动画相关的数学和物理知识。最后，通过详细分析“太空保龄球”和“躲避小行星”两款经典游戏的构思、设计和编码，把读者带入了HTML5游戏开发的殿堂。本书作者现任Mozilla技术布道师，是HTML5开发领域的明星级人物，被誉为“HTML5的化身”（Person ofHTML5），是名噪一时的“Google弹跳球”图标的HTML5Canvas实现者。它的个人站点拥有非常丰富的资源http：//rawkes.com。亚马逊读者对本书的评价颇高，称其为学习Canvas的必读之作。在本书中，可以学到：？ HTML5给我们带来的新特性，以及如何使用它们？ JavaScript的基本编程知识和捕获用户输入？ 什么是Canvas，为什么要学习使用它？ 如何使用Canvas的基本和高级特性？ 如何使用Canvas和一点点物理知识创建出逼真的动画？ 如何使用Canvas、JavaScript及其他HTML5特性创建交互游戏

　　Rob Hawkes，现任Mozilla技术布道师，国际知名的HTML5开发专家，被誉为“HTML5的化身”（Person ofHTML5），是名噪一时的“Google弹跳球”图标的HTML5Canvas实现者。Rob可以说是写着代码长大的，他对设计交互程序如醉如痴，对HTML5及其他Web新技术有着浓厚的兴趣。他曾在伯恩茅斯大学（BournemouthUniversity）学习交互媒体制作（Interactive MediaProduction）。大学未毕业，就已经获得了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 小结和结束语