内容简介

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

作品目录

第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 是否不需要理解纯JavaScript22

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 DOM44

2.12.1 HTML 网页示例44

2.12.2 使用纯JavaScript 访问DOM 45

2.12.3 使用jQuery 访问DOM46

2.12.4 操作DOM46

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 擦除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 创建HTML5 video 元素 127

5.7.2 使用HTML5 video API128

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 章 未来的Canvas232

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