HTML5 Canvas开发详解
任旻, 王洋, 邹鋆弢 译
出版时间：2013年07月
页数：573
“这是一本不可多得的好书，书中对Canvas这个可以说是HTML5中最令人兴奋的标签进行了非常详尽的阐述。书中大量的实例不仅令人深受启发，而且对视频、音频等HMTL5附带的特性进行了详尽的描述，这一点令人非常惊喜。”
——Rafaele Cecco，
长期从事视频游戏开发，作品包括Cybernoid、Exolon和Stormlord
无论使用什么平台、什么工具，HTML5的革命性升级都将很大程度上改变Web应用程序的开发方式。HTML5包含了许多新特性，值得我们去学习。本书通过Canvas元素引领读者入门，它或许是HTML5中最令人兴奋的新特性。通过本书，读者将学会如何使用Canvas进行绘图、渲染文字、处理图像、创建动画，最终构建出交互式的多媒体应用程序。
不论读者正在使用的是Flash或Silverlight，或者仅仅是HTML加JavaScript，通过本书的学习都能快速上手。本书使用了大量实例，展示如何使用Canvas创建不同的游戏和娱乐应用。在这个过程中，读者将会获得宝贵的HTML5经验，并且发现为什么顶级的应用开发者们都将这个标准称为网络开发技术真正的创新性未来。
· 创建并修改二维图形、文本和位图图像
· 嵌入和操作视频，以及添加音频
· 在Canvas上构建一个可用于创建多种游戏的基本框架
· 使用位图和拼板开发游戏图形动画
· 进入移动设备：使用PhoneGap将Canvas应用移植到iPhone上
· 探索将Canvas用于3D，开发多人在线的游戏应用程序
Steve Fulton和Jeff Fulton现任Zynga高级游戏开发工程师，曾任美泰玩具公司的Web开发经理，帮助美泰玩具创建了丰富的在线展示平台。他们还在8bitrocket.com上开设了关于Flash、Silverlight以及HTML5 Canvas的新闻、故事、博客和教程。
——Rafaele Cecco，
长期从事视频游戏开发，作品包括Cybernoid、Exolon和Stormlord
无论使用什么平台、什么工具，HTML5的革命性升级都将很大程度上改变Web应用程序的开发方式。HTML5包含了许多新特性，值得我们去学习。本书通过Canvas元素引领读者入门，它或许是HTML5中最令人兴奋的新特性。通过本书，读者将学会如何使用Canvas进行绘图、渲染文字、处理图像、创建动画，最终构建出交互式的多媒体应用程序。
不论读者正在使用的是Flash或Silverlight，或者仅仅是HTML加JavaScript，通过本书的学习都能快速上手。本书使用了大量实例，展示如何使用Canvas创建不同的游戏和娱乐应用。在这个过程中，读者将会获得宝贵的HTML5经验，并且发现为什么顶级的应用开发者们都将这个标准称为网络开发技术真正的创新性未来。
· 创建并修改二维图形、文本和位图图像
· 嵌入和操作视频，以及添加音频
· 在Canvas上构建一个可用于创建多种游戏的基本框架
· 使用位图和拼板开发游戏图形动画
· 进入移动设备：使用PhoneGap将Canvas应用移植到iPhone上
· 探索将Canvas用于3D，开发多人在线的游戏应用程序
Steve Fulton和Jeff Fulton现任Zynga高级游戏开发工程师，曾任美泰玩具公司的Web开发经理，帮助美泰玩具创建了丰富的在线展示平台。他们还在8bitrocket.com上开设了关于Flash、Silverlight以及HTML5 Canvas的新闻、故事、博客和教程。
- 第1章 html5 canvas简介
- 1.1 基础的html页面
- 1.1.1 [!doctype html]
- 1.1.2 [html lang="en"]
- 1.1.3 [meta charset="utf-8"]
- 1.1.4 [title]…[/title]
- 1.1.5 实现简单的html页面
- 1.2 本书中使用的基础html页面
- 1.2.1 [div]
- 1.2.2 [canvas]
- 1.3 文档对象模型(dom)和canvas
- 1.4 javascript和canvas
- 1.4.1 javascript框架和库
- 1.4.2 javascript放置的位置及其理由
- 1.5 html5 canvas版“hello world！”
- 1.5.1 为canvas封装javascript代码
- 1.5.2 将canvas添加到html页面中
- 1.5.3 检测浏览器是否支持canvas
- 1.5.4 获得2d上下文
- 1.5.5 drawscreen()函数
- 1.6 用console.log调试
- 1.7 2d上下文及其当前状态
- 1.8 html5 canvas对象
- 1.9 第二个示例：猜字母
- 1.9.1 游戏如何工作
- 1.9.2 “猜字母”游戏的变量
- 1.9.3 initgame()函数
- 1.9.4 eventkeypressed()函数
- 1.9.5 drawscreen()函数
- 1.9.6 导出canvas到图像
- 1.9.7 最终的游戏代码
- 1.10 内容预告
- 第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 内容预告
- 第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 内容预告
- 第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.8 像素操作
- 4.8.1 操作画布像素的api
- 4.8.2 应用程序拼板印章
- 4.9 画布间的复制
- 4.10 内容预告
- 第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 立方贝赛尔曲线运动
- 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 内容预告
- 第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 内容预告
- 第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 第1次迭代：使用单个对象播放声音
- 7.6.5 第2次迭代：创建无限个动态声音对象
- 7.6.6 第3次迭代：创建一个声音池
- 7.6.7 第4次迭代：重用预加载的声音
- 7.7 内容预告
- 第8章 画布游戏本质
- 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 内容预告
- 第9章 位图与声音的结合
- 9.1 扩展版的geo blaster
- 9.1.1 geo blaster的图片表
- 9.1.2 渲染其他游戏对象
- 9.1.3 添加声音
- 9.1.4 用对象池管理对象实例
- 9.1.5 添加步长定时器
- 9.1.6 geo blaster扩展版的完整源代码
- 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 内容预告
- 第10章 使用phonegap制作移动设备游戏
- 10.1 进军移动设备
- 10.1.1 phonegap简介
- 10.1.2 应用程序
- 10.1.3 代码
- 10.1.4 查看bsbingo.html的代码
- 10.1.5 应用程序代码
- 10.2 使用phonegap创建ios应用程序
- 10.2.1 安装xcode
- 10.2.2 安装phonegap
- 10.2.3 在xcode中创建bs bingo的phongap工程
- 10.2.4 在模拟器中测试新的空白应用程序
- 10.2.5 在工程中整合bs bingo
- 10.2.6 设置应用的方向
- 10.2.7 改变启动图和图表
- 10.2.8 在模拟器上测试
- 10.2.9 添加iphone手势
- 10.2.10 在index.htm页面中添加手势函数
- 10.2.11 在设备上测试
- 10.2.12 使用xcode指定一个测试设备
- 10.3 超越canvas
- 10.4 内容预告
- 第11章 进一步探索
- 11.1 使用webgl实现3d效果
- 11.1.1 webgl是什么
- 11.1.2 测试webgl
- 11.1.3 学习更多webgl的知识
- 11.1.4 webgl应用示例
- 11.1.5 完整的源代码列表
- 11.1.6 进一步探索webgl
- 11.1.7 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 总结
书名：HTML5 Canvas开发详解
作者：Steve Fulton, Jeff Fulton 著
译者：任旻, 王洋, 邹鋆弢 译
国内出版社：人民邮电出版社
出版时间：2013年07月
页数：573
书号：978-7-115-32186-2
原版书书名：HTML5 Canvas
原版书出版商：O'Reilly Media
购买选项
|
© 2024，奥莱利技术咨询(北京)有限公司。版权所有。 传真: +86-10-88097463 京ICP备05003502号 |
|