HTML5canvas开发详解(第2版)

HTML5canvas开发详解(第2版)

查阅电子书
手机扫码
  • 微信扫一扫

    关注微信公众号

因版权原因待上架

编辑推荐

HTML5开发新趋势:Canvas元素揭秘,打造交互式多媒体应用。

内容简介

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

章节目录

版权信息

作者简介

封面介绍

版权声明

O’Reilly Media,Inc.介绍

内容提要

致谢

前言

第2版介绍

第1版的更新

如何运行本书中的示例

读者需要具备的知识

本书组织结构

代码示例的使用

联系方式

Safari® 在线图书

第1章 HTML5 Canvas简介

1.1 什么是HTML5

1.2 基础的HTML5页面

1.2.1

1.2.2

1.2.3

1.2.4

1.2.5 一个简单的HTML5页面

1.3 本书使用的基础HTML页面

1.3.1

1.3.2

1.4 文档对象模型(DOM)和Canvas

1.5 JavaScript和Canvas

JavaScript放置的位置及其理由

1.6 HTML5 Canvas版“Hello World!”

1.6.1 为Canvas封装JavaScript代码

1.6.2 将Canvas添加到HTML页面中

1.6.3 检测浏览器是否支持Canvas

1.6.4 获得2D环境

1.6.5 drawScreen()函数

1.7 用console.log调试

1.8 2D环境及其当前状态

1.9 HTML5 Canvas对象

1.10 第二个示例:猜字母

1.10.1 游戏如何工作

1.10.2 “猜字母”游戏的变量

1.10.3 initGame()函数

1.10.4 eventKeyPressed()函数

1.10.5 drawScreen()函数

1.10.6 导出Canvas到图像

1.10.7 最终的游戏代码

1.11 动画版本的Hello World

1.11.1 一些必要的属性

1.11.2 动画循环

1.11.3 使用globalAlpha属性设置alpha透明度

1.11.4 清除并显示背景

1.11.5 更新globalAlpha属性

1.11.6 绘制文字

1.11.7 HTML5 Canvas实现无障碍访问:子dom

1.12 内容预告

第2章 在Canvas上绘图

2.1 本章基本文件设置

2.2 基本矩形

2.3 Canvas状态

2.3.1 什么不属于状态

2.3.2 如何保存和恢复Canvas状态

2.4 使用路径创建线段

2.4.1 设置路径的开始和结束

2.4.2 动态绘图

2.4.3 高级线段绘制举例

2.5 高级路径方法

2.5.1 弧线

2.5.2 贝塞尔曲线

2.5.3 Canvas裁切区域

2.6 在画布上合成

2.7 简单画布变换

2.7.1 旋转和平移变换

2.7.2 缩放变换

2.7.3 缩放和旋转组合变换

2.8 用颜色和渐变填充对象

2.8.1 基本填充颜色设置

2.8.2 填充渐变形状

2.9 用图案填充形状

2.10 创建阴影

2.11 清除画布的方法

2.11.1 简单填充

2.11.2 重置画布的宽和高

2.11.3 重新设置画布的clearRect 函数

2.12 检查一个点是否在当前路径

2.13 绘制一个焦点环

2.14 内容预告

第3章 HTML5 Canvas的文本API

3.1 显示基本文本

3.1.1 基本文本显示

3.1.2 在Text Arranger中处理基本文本

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

3.1.4 使用measureText

3.1.5 fillText和strokeText

3.2 设置文本字体

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

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

3.2.3 字体颜色

3.2.4 字体基线和对齐

3.2.5 Text Arranger 2.0版

3.3 文本和Canvas上下文

3.3.1 全局alpha和文本

3.3.2 全局阴影和文本

3.4 文本渐变和图案

3.4.1 文本线性渐变

3.4.2 文本径向渐变

3.4.3 文本图像图案

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

3.5 宽度、高度、缩放和toDataURL()回顾

3.5.1 动态调整画布尺寸

3.5.2 动态缩放画布

3.5.3 Canvas对象的toDataURL()方法

3.6 最终版的Text Arranger

3.7 渐变动画

3.8 Canvas里文本的未来

3.8.1 CSS文本

3.8.2 文本的无障碍访问

3.9 内容预告

第4章 Canvas图像

4.1 本章的基本文件设置

4.2 图像基础

4.2.1 预下载图像

4.2.2 使用drawImage()函数在画布上显示图像

4.2.3 调整画布上图像的大小

4.2.4 将部分图像复制到画布

4.3 简单的帧式动画

4.3.1 创建动画帧计数器

4.3.2 创建一个计时循环

4.3.3 改变拼板显示

4.4 高级帧式动画

4.4.1 检查拼图

4.4.2 创建动画数组

4.4.3 选择拼板显示

4.4.4 在拼板中循环

4.4.5 绘制拼板

4.4.6 在整个画布上移动图像

4.5 在图像上应用旋转变换

4.5.1 画布变换基础

4.5.2 为变换的图像设置动画

4.6 创建一个拼板网格

4.6.1 定义拼板地图

4.6.2 用Tiled创建拼板地图

4.6.3 在画布上显示地图

4.7 通过大图片深入了解绘图属性

4.7.1 为图像创建一个窗口

4.7.2 绘制图像窗口

4.7.3 修改图片容器的属性

4.7.4 缩放图像

4.7.5 平移图片

4.7.6 同时对图片进行移动和缩放

4.8 像素操作

4.8.1 操作画布像素的API

4.8.2 应用程序拼板印章

4.9 画布间的复制

4.10 使用像素检测物体碰撞

4.10.1 碰撞的对象

4.10.2 如何检测物体碰撞

4.10.3 检查两个物体的重叠部分

4.11 内容预告

第5章 数学、物理与动画

5.1 直线移动

5.1.1 两点间移动:线段距离

5.1.2 按照矢量移动

5.2 撞墙反弹

5.2.1 单个球反弹

5.2.2 多球撞墙反弹

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

5.2.4 多球反弹和碰撞

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

5.3 曲线和圆弧运动

5.3.1 匀速圆周运动

5.3.2 简单螺旋运动

5.3.3 3次贝赛尔曲线运动

5.3.4 移动图像

5.3.5 创建立方贝塞尔曲线环

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

5.4.1 简单重力

5.4.2 带反弹的简单重力

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

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

5.5 缓冲

5.5.1 缓冲结束(飞船着陆)

5.5.2 缓冲开始(起飞)

5.6 Box2D和画布

5.6.1 下载Box2dWeb

5.6.2 Box2D的工作原理

5.6.3 Box2D的Hello World

5.6.4 引入框架库

5.6.5 创建Box2dWeb世界

5.6.6 Box2dWeb中的单位

5.6.7 在Box2D中定义墙

5.6.8 创建小球

5.6.9 b2debugDraw渲染与Canvas渲染的对比

5.6.10 drawScreen()函数

5.6.11 重温反弹球

5.6.12 转换为Canvas

5.7 与Box2D交互

5.7.1 创建箱子

5.7.2 渲染箱子

5.7.3 增加互动效果

5.7.4 创建箱子

5.7.5 处理小球

5.8 关于Box2D的更多内容

5.9 内容预告

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

6.1 HTML5中对视频的支持

6.1.1 Theora + Vorbis = .ogg

6.1.2 H.264 + $$$ = .mp4

6.1.3 VP8 + Vorbis = .webm

6.1.4 结合3种视频格式

6.2 转换视频格式

6.3 HTML5视频的基本实现方法

6.3.1 普通的视频嵌入方法

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

6.3.3 调整视频的宽度和高度

6.4 使用JavaScript预加载视频

6.5 视频与画布

6.5.1 在HTML5 Canvas上显示视频

6.5.2 HTML5的视频属性

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

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

6.6.2 在画布上旋转视频

6.6.3 在画布上制作视频拼图

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

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

6.8 使用JavaScript录制视频

6.8.1 网络RTC多媒体捕捉接口及数据流接口

6.8.2 例1:播放视频

6.8.3 例2:在Canvas上播放视频并截图

6.8.4 例3:创建视频拼图

6.9 移动端HTML5视频的支持状况

6.10 内容预告

第7章 使用音频

7.1

7.2 音频格式

7.2.1 支持的音频格式

7.2.2 音频转换工具Audacity

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

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

7.3.1 音频函数

7.3.2 重要的音频属性

7.3.3 重要的音频事件

7.3.4 加载并播放音频

7.3.5 在画布上显示属性信息

7.4 不使用Audio标签播放声音

7.4.1 使用JavaScript动态创建audio元素

7.4.2 查找支持的音频格式

7.4.3 播放声音

7.4.4 不使用标签

7.5 创建画布音频播放器

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

7.5.2 加载按钮资源

7.5.3 设置音频播放器的值

7.5.4 鼠标事件

7.5.5 滑动播放指示器

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

7.5.7 循环/不循环切换按钮

7.5.8 单击并拖动音量滑块

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

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

7.6.2 迭代

7.6.3 太空掠夺者游戏框架

7.6.4 第一次迭代:使用单个对象播放声音

7.6.5 第二次迭代:创建无限个动态声音对象

7.6.6 第三次迭代:创建一个声音池

7.6.7 第四次迭代:重用预加载的声音

7.7 Web Audio API

7.7.1 什么是Web Audio API

7.7.2 使用Web Audio API开发太空掠夺者

7.8 内容预告

第8章 Canvas游戏(上)

8.1 为什么用HTML5开发游戏

8.1.1 Canvas与Flash比较

8.1.2 Canvas提供的新特性

8.2 游戏的基本HTML5文件

8.3 游戏的设计

8.4 游戏图形:使用路径绘制

8.4.1 所需的资源

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

8.5 Canvas上的动画

8.5.1 游戏定时器循环

8.5.2 玩家飞船的状态变化

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

Canvas的栈

8.7 游戏图形变换

8.7.1 使玩家飞船绕中心旋转

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

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

8.8.1 移动玩家飞船

8.8.2 使用键盘控制玩家飞船

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

8.9 基本游戏框架

8.9.1 游戏状态机

8.9.2 更新/渲染的重复周期

8.9.3 帧率计数器对象原型

8.10 整合所有元素

8.10.1 Geo Blaster游戏架构

8.10.2 Geo Blaster全局游戏变量

8.11 玩家对象

8.12 Geo Blaster游戏的算法

8.12.1 逻辑显示对象数组

8.12.2 级别难度控制

8.12.3 关卡和游戏结束

8.12.4 奖励玩家另外的飞船

8.12.5 应用碰撞检测

8.13 Geo Blaster Basic的完整源代码

8.14 陨石对象原型

8.15 在网格上使用A*算法查找最短路径

8.15.1 什么是A*算法

8.15.2 在更大的地图上使用A*

8.15.3 可穿过对角线的A*寻路算法

8.15.4 在带权值节点的地图里使用A*寻路算法

8.15.5 带权值及穿越对角线功能的A*寻路算法

8.15.6 让游戏角色顺着A*最短路径移动

8.15.7 坦克斜穿过墙壁

8.16 内容预告

第9章 Canvas游戏(下)

9.1 扩展版的Geo Blaster

9.1.1 Geo Blaster的图片表

9.1.2 渲染其他游戏对象

9.1.3 添加声音

9.1.4 用对象池管理对象实例

9.1.5 添加步长定时器

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

9.3 简单的基于区块的游戏

9.3.1 微型坦克迷宫的介绍

9.3.2 游戏中用到的图片表

9.3.3 游戏区域

9.3.4 玩家

9.3.5 敌人

9.3.6 目标

HTML5canvas开发详解(第2版)是2014年由人民邮电出版社出版,作者 (美) 富尔顿 (Fulton J.) 。

得书感谢您对《HTML5canvas开发详解(第2版)》关注和支持,如本书内容有不良信息或侵权等情形的,请联系本网站。

购买这本书

你可能喜欢
Unity 游戏开发技术详解与典型案例 电子书
本书对Unity3D集成开发环境界面、脚本的编写和众多特效的实现进行了详细介绍。全书共分16章。主要内容包括:Unity3D基础、Unity3D集成开发环境、Unity脚本的开发、Unity图形用户界面基础、物理引擎、着色器、常用着色器特效、3D游戏开发的常用技术、光影效果的使用、模型与动画、地形与寻路技术、游戏资源的更新、多线程技术与网络开发、Unity2D游戏开发、常用性能优化技术、休闲游戏等
Android APP开发实战——从规划到上线全程详解 电子书
本书详尽地介绍了APP从规划到上线过程中所涉及的各方面知识,包括产品规划和原型设计、效果图设计、切图和尺寸标注、APP与服务器间的协作、字符编码、网络、多媒体、数据加密、设计模式、APP架构设计、APP性能优化、开发工具的使用、APP测试和项目管理等。本书帮助读者开阔眼界,且能够以更专业和高效的方式完成APP的开发,适合新APP工程师作为开发参考。
Cocos2d-x 3D与VR游戏开发实战详解 电子书
内容提要本书共分为15章,全面讲解了用Cocos2d-x引擎进行3D游戏开发的知识和开发技巧,首先介绍3D开发中使用到的相关Cocos2d-x基础类,包括加载模型、背面剪裁、摄像机、骨骼动画、异步加载和自定义着色器等,接下来介绍常用的3D开发技巧,如标志板技术、天空盒、立方图纹理、水特效和材质系统、Cocos2d-x引擎中的地形(Terrain类)和导航网格(NavMesh类),适合模拟室外的平原
Unity5.X3D游戏开发技术详解与典型案例 电子书
本书对Unity 3D集成开发环境界面、脚本的编写和众多高级特效的实现进行了详细介绍,内容深入浅出,是一本适合不同需求、不同开发水平读者的技术宝典。
Android游戏开发大全(第3版) 电子书
本书是讲解Android游戏案例开发的专业书籍,全书分两部分共18章,前半部分为Android游戏开发核心技术,主要包括Android游戏开发的前台渲染、交互式通信、数据存储和传感器、网络编程、游戏背后的数学与物理、游戏地图开发、游戏开发小秘技、JBox2D物理引擎、3D应用开发基础等;后半部分为Android游戏开发实战综合案例,包括现在流行的多种游戏类型,如滚屏动作类游戏——坦克大战、网络游戏