HTML5 Canvas开发详解（第2版）
任旻, 罗泽鑫 译
出版时间：2014年05月
页数：642
随着Canvas的持续升温，Flash的光芒迅速消退。本书是Canvas的畅销图书，它在上一版的基础上，通过讲解如何开发可交互式多媒体应用，引导读者学习HTML5 Canvas。通过本书，你将学到如何使用Canvas进行绘图、渲染文字、处理图像、创建动画，而这些是开发交互式Web游戏的必备知识。
本书针对Canvas和HTML5技术的最新变动进行了更新，其中包含了大量清晰、可重用的代码示例，无论你当前使用的是Flash、Silverlight，还是HTML与JavaScript，都可以通过本书中的这些代码示例迅速掌握HTML5 Canvas。
你也会从本书中发现，为什么HTML5代表着创新性Web开发的未来。
· 创建和修改2D绘图、文本和位图图像；
· 使用数学算法来移动对象并模拟物理交互效果；
· 整合、操作视频，并添加音频；
· 构建一个可用于创建多款游戏的基本框架；
· 使用位图和tile表格开发游戏图形动画；
· 针对移动设备：创建Web应用，并针对iOS设备进行修改；
· 使用Canvas开发3D和多人游戏应用的探索。
Steve和Jeff Fulton各自在交互式娱乐开发领域均有16年以上的工作经验。Steve是Matel Toys公司数字游戏软件开发部的高级经理。Jeff是Producto工作室的CTO。他们俩人还在8bitrocket.com上培养了一大批忠实粉丝，这些粉丝通过该网站了解有关Flash、Sliverlight以及HTML5 Canvas的新闻、故事、博客和教程。
本书针对Canvas和HTML5技术的最新变动进行了更新，其中包含了大量清晰、可重用的代码示例，无论你当前使用的是Flash、Silverlight，还是HTML与JavaScript，都可以通过本书中的这些代码示例迅速掌握HTML5 Canvas。
你也会从本书中发现，为什么HTML5代表着创新性Web开发的未来。
· 创建和修改2D绘图、文本和位图图像；
· 使用数学算法来移动对象并模拟物理交互效果；
· 整合、操作视频，并添加音频；
· 构建一个可用于创建多款游戏的基本框架；
· 使用位图和tile表格开发游戏图形动画；
· 针对移动设备：创建Web应用，并针对iOS设备进行修改；
· 使用Canvas开发3D和多人游戏应用的探索。
Steve和Jeff Fulton各自在交互式娱乐开发领域均有16年以上的工作经验。Steve是Matel Toys公司数字游戏软件开发部的高级经理。Jeff是Producto工作室的CTO。他们俩人还在8bitrocket.com上培养了一大批忠实粉丝，这些粉丝通过该网站了解有关Flash、Sliverlight以及HTML5 Canvas的新闻、故事、博客和教程。
- 第1章 html5 canvas简介
- 1.1 什么是html5
- 1.2 基础的html5页面
- 1.2.1 [!doctype html]
- 1.2.2 [html lang="en"]
- 1.2.3 [meta charset="utf-8"]
- 1.2.4 [title]…[/title]
- 1.2.5 一个简单的html5页面
- 1.3 本书使用的基础html页面
- 1.3.1 [div]
- 1.3.2 [canvas]
- 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 [audio]标签
- 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 对游戏图形应用形状变换
- 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 目标
- 9.3.7 爆炸效果
- 9.3.8 回合制游戏的流程和状态机
- 9.3.9 简单区块移动逻辑概述
- 9.3.10 渲染逻辑概述
- 9.3.11 自定义简单人工智能概述
- 9.3.12 微型坦克迷宫的完整游戏代码
- 9.4 为基于区块的游戏世界添加滚动效果
- 9.4.1 第一步：将用于绘制屏幕的区块放在一个图片表中
- 9.4.2 第二步：用二维数组表示游戏世界
- 9.4.3 第三步：将基于区块的世界绘制在画布上
- 9.4.4 粗糙滚动与精确滚动
- 9.4.5 camera对象
- 9.4.6 world对象
- 9.4.7 精确滚动时行和列的缓冲区
- 9.4.8 粗糙滚动的完整代码示例
- 9.4.9 精确滚动的完整代码示例
- 9.5 内容预告
- 第10章 在移动设备上开发
- 10.1 第一个应用程序
- 10.1.1 代码
- 10.1.2 查看bsbingo.html的代码
- 10.1.3 应用程序代码
- 10.1.4 针对浏览器修改游戏
- 10.1.5 在真实设备上测试游戏
- 10.2 触屏版的retro blaster游戏
- 10.3 将触屏版retro blaster移动化
- 10.3.1 开发全屏游戏
- 10.3.2 触摸移动事件
- 10.3.3 触屏版retro blaster的完整代码
- 10.4 超越canvas
- 10.5 内容预告
- 第11章 进一步探索
- 11.1 使用webgl实现3d效果
- 11.1.1 webgl是什么
- 11.1.2 测试webgl
- 11.1.3 学习更多webgl的知识
- 11.1.4 webgl应用示例
- 11.1.5 进一步探索webgl
- 11.1.6 webgl的javascript类库
- 11.2 使用electroserver 5实现多人应用程序
- 11.2.1 安装electroserver
- 11.2.2 套接字服务器程序的基础架构
- 11.2.3 electroserver程序的基础架构
- 11.2.4 使用electroserver创建聊天程序
- 11.2.5 在google chrome中测试应用程序
- 11.2.6 进一步探索electroserver
- 11.2.7 这只是冰山一角
- 11.3 为canvas创建一个简单对象框架
- 11.3.1 创建一个支持拖放的应用程序
- 11.3.2 应用程序设计
- 11.4 windows 8应用与html5 canvas
- 11.5 html5.1与canvas level 2中有什么
- 11.5.1 html5.1 canvas
- 11.5.2 canvas
- 11.6 总结
- 附录 完整代码列表
书名：HTML5 Canvas开发详解（第2版）
作者：Steve Fulton, Jeff Fulton 著
译者：任旻, 罗泽鑫 译
国内出版社：人民邮电出版社
出版时间：2014年05月
页数：642
书号：978-7-115-35148-7
原版书书名：HTML5 Canvas, 2nd Edition
原版书出版商：O'Reilly Media
购买选项
|
© 2024，奥莱利技术咨询(北京)有限公司。版权所有。 传真: +86-10-88097463 京ICP备05003502号 |
|