HTML5 Canvas基础教程PDF电子书下载

第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圆周运动 1144

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