HTML5 Canvas开发详解 PDF格式高清电子书免费下载

HTML5 Canvas开发详解

作者 【美】Steve Fulton Jeff Fulton
译者 任旻 王洋 邹鋆弢
出版社 人民邮电出版社
出版日期 2013-08-01
页数 573
格式 Paper book / ebook (PDF)
ISBN 9787115321862
价格 99
  • 内容简介
  • 图书目录
  • 免费下载

出版信息

ISBN:9787115321862
语言:简体中文
包装/印刷类型:1
开本:16开
出版时间:2013-08-01
页数:573

内容简介

本书通过详细的细节讲解和实例演示,由浅入深地介绍了HTML5 canvas的使用特性,以及如何使用图像API等高级主题。本书分为11章。第1-4章通过示例向读者展示HTML Canvas的API的使用方法;在接下来的第5-10章中,示例的范围被扩展为应用程序的级别,在这个过程中将对Canvas的API做进一步的介绍;在最后的第11章中介绍了两个还处于实验性的领域:3D和多人应用。

  HTML5是Web应用程序开发的新趋势,Canvas是其**令人兴奋的新特性。《HTML5 Canvas开发详解》通过对Canvas元素进行详细介绍,引领读者进入HTML5开发的大门。通过《HTML5 Canvas开发详解》,读者将学到如何使用Canvas进行绘图、渲染文字、处理图像、创建动画,**终构建出交互式的多媒体应用程序。

  《HTML5 Canvas开发详解》适合各个层级的Web应用开发人员阅读使用。不论他现在是使用Flash、Silverlight的成熟开发人员,还仅仅是只用过HTML及JavaScript的初学者。

图书目录

目 录

第 1章 HTML5 Canvas简介 1

1.1 基础的HTML页面 2

1.1.1  2

1.1.2 <html lang="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.4.2 文本径向渐变 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.2.1 单个球反弹 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.1 HTML5中对视频的支持 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.1 PhoneGap简介 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.1 WebGL是什么 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

点击展开

点击收起

HTML5 Canvas开发详解 PDF格式高清电子书免费下载

抱歉,暂无数据!催一下?我有资源 ?

看了 HTML5 Canvas开发详解 的用户也看了: