HTML5 Canvas开发详解PDF|Epub|txt|kindle电子书版本网盘下载

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）和Canvas5

1.4 JavaScript和Canvas5

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检测浏览器是否支持Canvas9

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的文本API61

3.1显示基本文本61

3.1.1基本文本显示61

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

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

3.1.4使用measureText63

3.1.5 fillText和strokeText64

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 Arranger99

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操作画布像素的API143

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=.ogg232

6.1.2 H.264+＄＄＄=.mp4233

6.1.3 VP8+Vorbis=.webm233

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音频转换工具Audacity290

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 Blaster413

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安装Xcode512

10.2.2安装PhoneGap513

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

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

10.2.5在工程中整合BS Bingo519

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超越Canvas530

10.4内容预告531

第11章 进一步探索532

11.1使用WebGL实现3D效果532

11.1.1WebGL是什么533

11.1.2测试WebGL533

11.1.3学习更多WebGL的知识534

11.1.4 WebGL应用示例534

11.1.5完整的源代码列表539

11.1.6进一步探索WebGL546

11.1.7 WebGL的JavaScript类库546

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

11.2.1安装ElectroServer548

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

11.2.3 ElectroServer程序的基础架构551

11.2.4使用ElectroServer创建聊天程序552

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

11.2.6进一步探索ElectroServer562

11.2.7这只是冰山一角571

11.3总结571