HTML5 Canvas开发详解PDF电子书下载

第1章 HTML5 Canvas简介 1

1.1基础的HTML页面 2

1.1.1 〈！doctype html〉 2

1.1.2 〈htmllang=“en”〉 3

1.1.3 〈meta charset=“UTF-8”〉 3

1.1.4 〈title〉…〈/title〉 3

1.1.5实现简单的HTML页面 3

1.2本书中使用的基础HTML页面 4

1.2.1 〈div〉 4

1.2.2 〈canvas〉 5

1.3文档对象模型（DOM）和Canvas 5

1.4 JavaScript和Canvas 5

1.4.1 JavaScript框架和库 5

1.4.2 JavaScript放置的位置及其理由 6

1.5 HTML5 Canvas版“Hello World！” 6

1.5.1为Canvas封装JavaScript代码 7

1.5.2将Canvas添加到HTML页面中 8

1.5.3检测浏览器是否支持Canvas 9

1.5.4获得2D上下文 10

1.5.5 drawScreen（）函数 10

1.6用Console.log调试 13

1.7 2D上下文及其当前状态 14

1.8 HTML5 Canvas对象 15

1.9第二个示例：猜字母 15

1.9.1游戏如何工作 16

1.9.2“猜字母”游戏的变量 16

1.9.3 initGame（）函数 17

1.9.4 eventKeyPressed（）函数 17

1.9.5 drawScreen（）函数 19

1.9.6导出Canvas到图像 20

1.9.7最终的游戏代码 21

1.10内容预告 24

第2章在Canvas上绘图 25

2.1本章基本文件设置 25

2.2基本矩形 26

2.3 Canvas状态 27

2.3.1什么不属于状态 28

2.3.2如何保存和恢复Canvas状态 28

2.4使用路径创建线段 28

2.4.1设置路径的开始和结束 28

2.4.2动态绘图 28

2.4.3高级线段绘制举例 30

2.5高级路径方法 31

2.5.1弧线 31

2.5.2贝塞尔曲线 33

2.5.3 Canvas裁切区域 34

2.6在画布上合成 36

2.7简单画布变换 38

2.7.1旋转和平移变换 38

2.7.2缩放变换 43

2.7.3缩放和旋转组合变换 44

2.8用颜色和渐变填充对象 46

2.8.1基本填充颜色设置 46

2.8.2填充渐变形状 47

2.9用图案填充形状 56

2.10创建阴影 59

2.11内容预告 60

第3章 HTML5 Canvas的文本API 61

3.1显示基本文本 61

3.1.1基本文本显示 61

3.1.2在Text Arranger中处理基本文本 62

3.1.3 HTML表单和画布之间的通信 62

3.1.4使用measureText 63

3.1.5 fillText和strokeText 64

3.2设置文本字体 70

3.2.1字体大小、磅重和样式基础 70

3.2.2在文本编辑器中处理字体大小和外观 70

3.2.3字体颜色 74

3.2.4字体基线和对齐 76

3.2.5 Text Arranger 2.0版 80

3.3文本和Canvas上下文 84

3.3.1全局Alpha和文本 84

3.3.2全局阴影和文本 86

3.4文本渐变和图案 89

3.4.1文本线性渐变 89

3.42文本径向渐变 90

3.4.3文本图像图案 90

3.4.4在Text Arranger中处理渐变和图案 92

3.5宽度、高度、缩放和toDataURL（）回顾 94

3.5.1动态调整画布尺寸 94

3.5.2动态缩放画布 97

3.5.3 Canvas对象的toDataURL（）方法 98

3.6最终版的Text Arranger 99

3.7内容预告 110

第4章Canvas图像 111

4.1本章的基本文件设置 111

4.2图像基础 112

4.2.1预下载图像 113

4.2.2使用drawImage（）函数在画布上显示图像 113

4.2.3调整画布上图像的大小 115

4.2.4将部分图像复制到画布 116

4.3简单的帧式动画 117

4.3.1创建动画帧计数器 117

4.3.2创建一个计时循环 118

4.3.3改变拼板显示 118

4.4高级帧式动画 119

4.4.1检查拼图 120

4.4.2创建动画数组 120

4.4.3选择拼板显示 120

4.4.4在拼板中循环 121

4.4.5绘制拼板 121

4.4.6在整个画布上移动图像 122

4.5在图像上应用旋转变换 123

4.5.1画布变换基础 124

4.5.2为变换的图像设置动画 126

4.6创建一个拼板网格 128

4.6.1定义拼板地图 129

4.6.2用Tiled创建拼板地图 129

4.6.3在画布上显示地图 131

4.7缩放和平移图像 134

4.7.1为图像创建一个窗口 135

4.7.2绘制图像窗口 135

4.7.3平移图像 136

4.7.4缩放和平移图像 138

4.7.5应用程序：控制平移和缩放 139

4.8像素操作 143

4.8.1操作画布像素的API 143

4.8.2应用程序拼板印章 144

4.9画布间的复制 150

4.10内容预告 153

第5章 数学、物理与动画 154

5.1直线移动 154

5.1.1两点间移动：线段距离 156

5.1.2在矢量上移动 161

5.2撞墙反弹 164

5.21单个球反弹 165

5.2.2多球撞墙反弹 168

5.2.3可动态调整画布大小的多球碰撞反弹 173

5.2.4多球反弹和碰撞 178

5.2.5有摩擦力的多球碰撞反弹 190

5.3曲线和圆弧运动 195

5.3.1匀速圆周运动 195

5.3.2简单螺旋运动 198

5.3.3立方贝赛尔曲线运动 200

5.3.4移动图像 205

5.3.5创建立方贝塞尔曲线环 209

5.4简单重力、弹力及摩擦力 213

5.4.1简单的重力 213

5.4.2带反弹的简单重力 216

5.4.3重力反弹及应用简单弹力 219

5.4.4简单重力、弹力及摩擦力的综合 222

5.5缓冲 224

5.5.1缓冲结束（飞船着陆） 224

5.5.2缓冲开始（起飞） 228

5.6内容预告 231

第6章 在画布中融合HTML5视频 232

6.1HTML5中对视频的支持 232

6.1.1 Theora+Vorbis=.ogg 232

6.1.2 H.264+＄＄＄=.mp4 233

6.1.3 VP8+Vorbis=.webm 233

6.1.4结合3种视频格式 234

6.2转换视频格式 234

6.3 HTML5视频的基本实现方法 234

6.3.1普通的视频嵌入方法 235

6.3.2添加视频控制器并设置播放方式 237

6.3.3调整视频的宽度和高度 238

6.4使用JavaScript预加载视频 242

6.5视频与画布 246

6.5.1在HTML5 Canvas上显示视频 246

6.5.2 HTML5的视频属性 251

6.6在画布上使用视频的示例 255

6.6.1使用currentTime属性创建视频事件 255

6.6.2在画布上旋转视频 259

6.6.3在画布上制作视频拼图 264

6.6.4在画布上创建视频控制器 276

6.7回顾动画效果之移动视频 284

6.8内容预告 288

第7章 使用音频 289

7.1〈audio〉标签 289

7.2音频格式 290

7.2.1支持的音频格式 290

7.2.2音频转换工具Audacity 290

7.2.3示例：使用所有3种音频格式 291

7.3 Audio标签的属性、函数和事件 292

7.3.1音频函数 292

7.3.2重要的音频属性 293

7.3.3重要的音频事件 293

7.3.4加载并播放音频 294

7.3.5在画布上显示属性信息 294

7.4不使用Audio标签播放声音 298

7.4.1使用JavaScript动态创建audio元素 298

7.4.2查找支持的音频格式 299

7.4.3播放声音 300

7.4.4不使用标签 301

7.5创建画布音频播放器 303

7.5.1在Canvas中创建自定义用户控件 304

7.5.2加载按钮资源 305

7.5.3设置音频播放器的值 306

7.5.4鼠标事件 307

7.5.5滑动播放指示器 307

7.5.6播放/暂停按钮：检测单击并获取位置 308

7.5.7循环/不循环切换按钮 310

7.5.8单击并拖动音量滑块 311

7.6音频案例：太空掠夺者游戏 319

7.6.1应用程序中不同的声音——事件声音 319

7.6.2迭代 319

7.6.3太空掠夺者游戏框架 320

7.6.4第1次迭代：使用单个对象播放声音 328

7.6.5第2次迭代：创建无限个动态声音对象 328

7.6.6第3次迭代：创建一个声音池 330

7.6.7第4次迭代：重用预加载的声音 332

7.7内容预告 343

第8章 画布游戏本质 344

8.1为什么用HTML5开发游戏 344

8.1.1 Canvas与Flash比较 344

8.1.2 Canvas提供的新特性 345

8.2游戏的基本HTML5文件 345

8.3游戏的设计 346

8.4游戏图形：使用路径绘制 347

8.4.1所需的资源 347

8.4.2使用路径绘制游戏的主角 347

8.5 Canvas上的动画 350

8.5.1游戏定时器循环 350

8.5.2玩家飞船的状态变化 351

8.6对游戏图形应用形状变换 353

8.7游戏图形变换 355

8.7.1使玩家飞船绕中心旋转 355

8.7.2使用Alpha通道实现飞船淡入 357

8.8游戏物体的物理算法和动画 358

8.8.1移动玩家飞船 359

8.8.2使用键盘控制玩家飞船 360

8.8.3设置玩家飞船的最大速度 365

8.9基本游戏框架 365

8.9.1游戏状态机 365

8.9.2更新/渲染的重复周期 369

8.9.3帧率计数器对象原型 371

8.10整合所有元素 373

8.10.1 Geo Blaster游戏架构 373

8.10.2 Geo Blaster全局游戏变量 376

8.11玩家对象 377

8.12 Geo Blaster游戏的算法 377

8.12.1逻辑显示对象数组 378

8.12.2级别难度控制 380

8.12.3关卡和游戏结束 380

8.12.4奖励玩家另外的飞船 381

8.12.5应用碰撞检测 382

8.13 Geo Blaster Basic的完整源代码 384

8.14陨石对象原型 410

8.15 内容预告 412

第9章 位图与声音的结合 413

9.1扩展版的Geo Blaster 413

9.1.1 Geo Blaster的图片表 414

9.1.2渲染其他游戏对象 419

9.1.3添加声音 424

9.1.4用对象池管理对象实例 428

9.1.5添加步长定时器 430

9.1.6 Geo Blaster扩展版的完整源代码 432

9.2在运行时创建动态的图片表 464

9.3简单的基于区块的游戏 468

9.3.1微型坦克迷宫的介绍 469

9.3.2游戏中用到的图片表 470

9.3.3游戏区域 471

9.3.4玩家 472

9.3.5敌人 473

9.3.6目标 474

9.3.7爆炸效果 474

9.3.8回合制游戏的流程和状态机 474

9.3.9简单区块移动逻辑概述 478

9.3.10渲染逻辑概述 480

9.3.11自定义简单人工智能概述 481

9.3.12微型坦克迷宫的完整游戏代码 482

9.4内容预告 501

第10章 使用PhoneGap制作移动设备游戏 502

10.1进军移动设备 502

10.1.1PhoneGap简介 503

10.1.2应用程序 503

10.1.3代码 504

10.1.4查看 BSBingo.html的代码 508

10.1.5应用程序代码 511

10.2使用PhoneGap创建iOS应用程序 512

10.2.1安装Xcode 512

10.2.2安装PhoneGap 513

10.2.3在Xcode中创建BS Bingo的PhonGap工程 515

10.2.4在模拟器中测试新的空白应用程序 517

10.2.5在工程中整合BS Bingo 519

10.2.6设置应用的方向 521

10.2.7改变启动图和图表 522

10.2.8在模拟器上测试 524

10.2.9添加iPhone手势 526

10.2.10在index.htm页面中添加手势函数 527

10.2.11在设备上测试 528

10.2.12使用Xcode指定一个测试设备 529

10.3超越Canvas 530

10.4内容预告 531

第11章 进一步探索 532

11.1使用WebGL实现3D效果 532

11.1.1WebGL是什么 533

11.1.2测试WebGL 533

11.1.3学习更多WebGL的知识 534

11.1.4 WebGL应用示例 534

11.1.5完整的源代码列表 539

11.1.6进一步探索WebGL 546

11.1.7 WebGL的JavaScript类库 546

11.2使用ElectroServer 5实现多人应用程序 547

11.2.1安装ElectroServer 548

11.2.2套接字服务器程序的基础架构 550

11.2.3 ElectroServer程序的基础架构 551

11.2.4使用ElectroServer创建聊天程序 552

11.2.5在Google Chrome中测试应用程序 558

11.2.6进一步探索ElectroServer 562

11.2.7这只是冰山一角 571

11.3总结 571