HTML5 Canvas基础教程
11推荐 收藏
15.9K阅读
图灵程序设计丛书

HTML5 Canvas基础教程

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

本书适合各层次Web 设计及开发人员阅读。

收藏本书能做什么?

有情况的时候会收到通知,比如电子书发布等。

纸质书
¥49.00

其他购买方式?

出版信息

同系列书

  • HTTP权威指南

    David Gourley   Brian Totty   Marjorie Sayer   Sailu Reddy   Anshu Aggarwal   陈涓   赵振平   译

    本书是HTTP及其相关核心Web技术方面的权威著作,主要介绍了Web应用程序是如何工作的,核心的因特网协议如何...

  • JavaScript高级程序设计(第3版)

    Nicholas C.Zakas   李松峰   曹力   译

    本书是JavaScript超级畅销书的新版。ECMAScript 5 和HTML5在标准之争中双双胜出,使大量...

  • 计算机科学的基础

    Al Aho   Jeff Ullman   傅尔也   译

    本书全面而详细地阐述了计算机科学的理论基础,从抽象概念的机械化到各种数据模型的建立,用算法、数据抽象等核心思想...

  • Java技术手册(第6版)

    Benjamin J Evans   David Flanagan   安道   译

    通过学习本书,你将能够: 掌握最新的语言细节,包括Java 8的变化 使用基本的Java句法学习面向对...

  • 机器学习实战

    Peter Harrington   李锐   李鹏   曲亚东   王斌   译

    机器学习是人工智能研究领域中一个极其重要的研究方向,在现今的大数据时代背景下,捕获数据并从中萃取有价值的信息或...

本书特色

1.可能是第一本专门讲HTML5 Canvas开发的书;
2.内容简单,难易得当,适合的读者面广。

目录

第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 圆周运动  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 章 未来的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



相关文章

  • 李松峰 3推荐

    《HTML5 Canvas基础教程》适合你吗?

    “大爱!如果你想真正理解HTML5 Canvas,学习使用Canvas开发游戏,这本书就是为你写的。虽然书中讲解了不少基础概念,但深入进去就会发现,即使是有经验的开发人员也能够从中得到启发。不要犹豫,坚决拿下!” ——亚马逊读者评价 ![enter image desc…...

  • 盼盼姐 10推荐

    好书短评之《HTML5 Canvas基础教程》

    “看看国外读者的评价,找到你需要的书。”外版图书在国内上市前,本栏目将努力向读者朋友们呈现公正客观的评价。 如果你发现这是本好书,请不要忘记收藏。 ![enter image description here][1] *本书从HTML5 和JavaScript(以及jQ…...

  • 李松峰 12推荐

    “HTML5年度Home Party暨首届原创游戏大赛颁奖典礼”侧记及优秀作品赏析

    圣诞刚过,元旦将至。2011年12月29日,天不亮,北京城就悄悄地飘起了小雪。这是入冬以来北京的第二场雪,这场雪时断时续地下了大半天。雪不大,但除了路面和人行道,建筑物和树枝都披上了银装。这银装的京城似乎专门在为一个节日而装扮起来了。 下午,“HTML5年度Home Part…...

  • 夜雨 6推荐

    五分钟学会HTML5!(一)

    本文的原链接是http://www.codeproject.com/KB/solution-center/HTML5-in-5.aspx. 来自【iTran乐译】第2期活动,第8篇文章 。 毫无疑问,对于开发人员而言,HTML5已是一个热点话题。如果你需要快速了解HTML5…...

  • 果然是基础教程,纯粹的入门书籍!有一点经验的就别浪费钱买这书了
    silverbolt  发表于 2012-01-24 10:02:34
    推荐
    • http://www.apress.com/9781430232919

      ITBJ  发表于 2012-09-24 13:14:14
  • 速度很快啊
    曾少宁  发表于 2011-11-14 19:56:44
    推荐
    • 今天的HTML5会议上已经展示样书了。

      武卫东  发表于 2011-12-29 08:11:06
  • 网友 @TangoChen 指出:第144页第8行后面的“向上运动”括号内y值应该为负数..“向下运动”括号内y值应该为正数..反过来了
    曾少宁  发表于 2012-03-21 09:51:40
    推荐
  • 122页那里有错,trueX和tureY是不用减1的。
    Nero0  发表于 2012-03-27 21:51:33
    推荐
  • 前天买了一本。不错。2012.9.24
    ITBJ  发表于 2012-09-24 13:10:19
    推荐
  • 这里好像没有代码可以下载。、
    小明^^  发表于 2012-11-21 21:41:51
    推荐