HTML5 canvas开发详解(第2版)
<h1 id="html5-canvas开发详解第2版">HTML5 canvas开发详解(第2版)</h1><h3 id="封面介绍">封面介绍</h3>
<h3 id="oreilly-mediainc介绍">O’Reilly Media，Inc.介绍</h3>
<h4 id="第2版介绍">第2版介绍</h4>
<h4 id="第1版的更新">第1版的更新</h4>
<h4 id="如何运行本书中的示例">如何运行本书中的示例</h4>
<h4 id="读者需要具备的知识">读者需要具备的知识</h4>
<h4 id="本书组织结构">本书组织结构</h4>
<h4 id="代码示例的使用">代码示例的使用</h4>
<h4 id="联系方式">联系方式</h4>
<h4 id="safari-在线图书">Safari® 在线图书</h4>
<h3 id="1-html5-canvas简介">1 HTML5 Canvas简介</h3>
<h4 id="11-什么是html5">1.1 什么是HTML5</h4>
<h4 id="12-基础的html5页面">1.2 基础的HTML5页面</h4>
<h5 id="121-doctype-html">1.2.1 <!doctype html></h5>
<h5 id="122-">1.2.2 </h5>
<h5 id="123">1.2.3</h5>
<h5 id="124-">1.2.4 <title>…</title></h5>
<h5 id="125-一个简单的html5页面">1.2.5 一个简单的HTML5页面</h5>
<h4 id="13-本书使用的基础html页面">1.3 本书使用的基础HTML页面</h4>
<h5 id="131-">1.3.1 <div></div></h5>
<h5 id="132-">1.3.2 <canvas></canvas></h5>
<h4 id="14-文档对象模型dom和canvas">1.4 文档对象模型（DOM）和Canvas</h4>
<h4 id="15-javascript和canvas">1.5 JavaScript和Canvas</h4>
<h5 id="javascript放置的位置及其理由">JavaScript放置的位置及其理由</h5>
<h4 id="16-html5-canvas版hello-world">1.6 HTML5 Canvas版“Hello World！”</h4>
<h5 id="161-为canvas封装javascript代码">1.6.1 为Canvas封装JavaScript代码</h5>
<h5 id="162-将canvas添加到html页面中">1.6.2 将Canvas添加到HTML页面中</h5>
<h5 id="163-检测浏览器是否支持canvas">1.6.3 检测浏览器是否支持Canvas</h5>
<h5 id="164-获得2d环境">1.6.4 获得2D环境</h5>
<h5 id="165-drawscreen函数">1.6.5 drawScreen()函数</h5>
<h4 id="17-用consolelog调试">1.7 用console.log调试</h4>
<h4 id="18-2d环境及其当前状态">1.8 2D环境及其当前状态</h4>
<h4 id="19-html5-canvas对象">1.9 HTML5 Canvas对象</h4>
<h4 id="110-第二个示例猜字母">1.10 第二个示例：猜字母</h4>
<h5 id="1101-游戏如何工作">1.10.1 游戏如何工作</h5>
<h5 id="1102-猜字母游戏的变量">1.10.2 “猜字母”游戏的变量</h5>
<h5 id="1103-initgame函数">1.10.3 initGame()函数</h5>
<h5 id="1104-eventkeypressed函数">1.10.4 eventKeyPressed()函数</h5>
<h5 id="1105-drawscreen函数">1.10.5 drawScreen()函数</h5>
<h5 id="1106-导出canvas到图像">1.10.6 导出Canvas到图像</h5>
<h5 id="1107-最终的游戏代码">1.10.7 最终的游戏代码</h5>
<h4 id="111-动画版本的hello-world">1.11 动画版本的Hello World</h4>
<h5 id="1111-一些必要的属性">1.11.1 一些必要的属性</h5>
<h5 id="1112-动画循环">1.11.2 动画循环</h5>
<h5 id="1113-使用globalalpha属性设置alpha透明度">1.11.3 使用globalAlpha属性设置alpha透明度</h5>
<h5 id="1114-清除并显示背景">1.11.4 清除并显示背景</h5>
<h5 id="1115-更新globalalpha属性">1.11.5 更新globalAlpha属性</h5>
<h5 id="1116-绘制文字">1.11.6 绘制文字</h5>
<h5 id="1117-html5-canvas实现无障碍访问子dom">1.11.7 HTML5 Canvas实现无障碍访问：子dom</h5>
<h4 id="112-内容预告">1.12 内容预告</h4>
<h3 id="2-在canvas上绘图">2 在Canvas上绘图</h3>
<h4 id="21-本章基本文件设置">2.1 本章基本文件设置</h4>
<h4 id="22-基本矩形">2.2 基本矩形</h4>
<h4 id="23-canvas状态">2.3 Canvas状态</h4>
<h5 id="231-什么不属于状态">2.3.1 什么不属于状态</h5>
<h5 id="232-如何保存和恢复canvas状态">2.3.2 如何保存和恢复Canvas状态</h5>
<h4 id="24-使用路径创建线段">2.4 使用路径创建线段</h4>
<h5 id="241-设置路径的开始和结束">2.4.1 设置路径的开始和结束</h5>
<h5 id="242-动态绘图">2.4.2 动态绘图</h5>
<h5 id="243-高级线段绘制举例">2.4.3 高级线段绘制举例</h5>
<h4 id="25-高级路径方法">2.5 高级路径方法</h4>
<h5 id="251-弧线">2.5.1 弧线</h5>
<h5 id="252-贝塞尔曲线">2.5.2 贝塞尔曲线</h5>
<h5 id="253-canvas裁切区域">2.5.3 Canvas裁切区域</h5>
<h4 id="26-在画布上合成">2.6 在画布上合成</h4>
<h4 id="27-简单画布变换">2.7 简单画布变换</h4>
<h5 id="271-旋转和平移变换">2.7.1 旋转和平移变换</h5>
<h5 id="272-缩放变换">2.7.2 缩放变换</h5>
<h5 id="273-缩放和旋转组合变换">2.7.3 缩放和旋转组合变换</h5>
<h4 id="28-用颜色和渐变填充对象">2.8 用颜色和渐变填充对象</h4>
<h5 id="281-基本填充颜色设置">2.8.1 基本填充颜色设置</h5>
<h5 id="282-填充渐变形状">2.8.2 填充渐变形状</h5>
<h4 id="29-用图案填充形状">2.9 用图案填充形状</h4>
<h4 id="210-创建阴影">2.10 创建阴影</h4>
<h4 id="211-清除画布的方法">2.11 清除画布的方法</h4>
<h5 id="2111-简单填充">2.11.1 简单填充</h5>
<h5 id="2112-重置画布的宽和高">2.11.2 重置画布的宽和高</h5>
<h5 id="2113-重新设置画布的clearrect-函数">2.11.3 重新设置画布的clearRect 函数</h5>
<h4 id="212-检查一个点是否在当前路径">2.12 检查一个点是否在当前路径</h4>
<h4 id="213-绘制一个焦点环">2.13 绘制一个焦点环</h4>
<h4 id="214-内容预告">2.14 内容预告</h4>
<h3 id="3-html5-canvas的文本api">3 HTML5 Canvas的文本API</h3>
<h4 id="31-显示基本文本">3.1 显示基本文本</h4>
<h5 id="311-基本文本显示">3.1.1 基本文本显示</h5>
<h5 id="312-在text-arranger中处理基本文本">3.1.2 在Text Arranger中处理基本文本</h5>
<h5 id="313-html表单和画布之间的通信">3.1.3 HTML表单和画布之间的通信</h5>
<h5 id="314-使用measuretext">3.1.4 使用measureText</h5>
<h5 id="315-filltext和stroketext">3.1.5 fillText和strokeText</h5>
<h4 id="32-设置文本字体">3.2 设置文本字体</h4>
<h5 id="321-字体大小磅重和样式基础">3.2.1 字体大小、磅重和样式基础</h5>
<h5 id="322-在文本编辑器中处理字体大小和外观">3.2.2 在文本编辑器中处理字体大小和外观</h5>
<h5 id="323-字体颜色">3.2.3 字体颜色</h5>
<h5 id="324-字体基线和对齐">3.2.4 字体基线和对齐</h5>
<h5 id="325-text-arranger-20版">3.2.5 Text Arranger 2.0版</h5>
<h4 id="33-文本和canvas上下文">3.3 文本和Canvas上下文</h4>
<h5 id="331-全局alpha和文本">3.3.1 全局alpha和文本</h5>
<h5 id="332-全局阴影和文本">3.3.2 全局阴影和文本</h5>
<h4 id="34-文本渐变和图案">3.4 文本渐变和图案</h4>
<h5 id="341-文本线性渐变">3.4.1 文本线性渐变</h5>
<h5 id="342-文本径向渐变">3.4.2 文本径向渐变</h5>
<h5 id="343-文本图像图案">3.4.3 文本图像图案</h5>
<h5 id="344-在text-arranger中处理渐变和图案">3.4.4 在Text Arranger中处理渐变和图案</h5>
<h4 id="35-宽度高度缩放和todataurl回顾">3.5 宽度、高度、缩放和toDataURL()回顾</h4>
<h5 id="351-动态调整画布尺寸">3.5.1 动态调整画布尺寸</h5>
<h5 id="352-动态缩放画布">3.5.2 动态缩放画布</h5>
<h5 id="353-canvas对象的todataurl方法">3.5.3 Canvas对象的toDataURL()方法</h5>
<h4 id="36-最终版的text-arranger">3.6 最终版的Text Arranger</h4>
<h4 id="37-渐变动画">3.7 渐变动画</h4>
<h4 id="38-canvas里文本的未来">3.8 Canvas里文本的未来</h4>
<h5 id="381-css文本">3.8.1 CSS文本</h5>
<h5 id="382-文本的无障碍访问">3.8.2 文本的无障碍访问</h5>
<h4 id="39-内容预告">3.9 内容预告</h4>
<h3 id="4-canvas图像">4 Canvas图像</h3>
<h4 id="41-本章的基本文件设置">4.1 本章的基本文件设置</h4>
<h4 id="42-图像基础">4.2 图像基础</h4>
<h5 id="421-预下载图像">4.2.1 预下载图像</h5>
<h5 id="422-使用drawimage函数在画布上显示图像">4.2.2 使用drawImage()函数在画布上显示图像</h5>
<h5 id="423-调整画布上图像的大小">4.2.3 调整画布上图像的大小</h5>
<h5 id="424-将部分图像复制到画布">4.2.4 将部分图像复制到画布</h5>
<h4 id="43-简单的帧式动画">4.3 简单的帧式动画</h4>
<h5 id="431-创建动画帧计数器">4.3.1 创建动画帧计数器</h5>
<h5 id="432-创建一个计时循环">4.3.2 创建一个计时循环</h5>
<h5 id="433-改变拼板显示">4.3.3 改变拼板显示</h5>
<h4 id="44-高级帧式动画">4.4 高级帧式动画</h4>
<h5 id="441-检查拼图">4.4.1 检查拼图</h5>
<h5 id="442-创建动画数组">4.4.2 创建动画数组</h5>
<h5 id="443-选择拼板显示">4.4.3 选择拼板显示</h5>
<h5 id="444-在拼板中循环">4.4.4 在拼板中循环</h5>
<h5 id="445-绘制拼板">4.4.5 绘制拼板</h5>
<h5 id="446-在整个画布上移动图像">4.4.6 在整个画布上移动图像</h5>
<h4 id="45-在图像上应用旋转变换">4.5 在图像上应用旋转变换</h4>
<h5 id="451-画布变换基础">4.5.1 画布变换基础</h5>
<h5 id="452-为变换的图像设置动画">4.5.2 为变换的图像设置动画</h5>
<h4 id="46-创建一个拼板网格">4.6 创建一个拼板网格</h4>
<h5 id="461-定义拼板地图">4.6.1 定义拼板地图</h5>
<h5 id="462-用tiled创建拼板地图">4.6.2 用Tiled创建拼板地图</h5>
<h5 id="463-在画布上显示地图">4.6.3 在画布上显示地图</h5>
<h4 id="47-通过大图片深入了解绘图属性">4.7 通过大图片深入了解绘图属性</h4>
<h5 id="471-为图像创建一个窗口">4.7.1 为图像创建一个窗口</h5>
<h5 id="472-绘制图像窗口">4.7.2 绘制图像窗口</h5>
<h5 id="473-修改图片容器的属性">4.7.3 修改图片容器的属性</h5>
<h5 id="474-缩放图像">4.7.4 缩放图像</h5>
<h5 id="475-平移图片">4.7.5 平移图片</h5>
<h5 id="476-同时对图片进行移动和缩放">4.7.6 同时对图片进行移动和缩放</h5>
<h4 id="48-像素操作">4.8 像素操作</h4>
<h5 id="481-操作画布像素的api">4.8.1 操作画布像素的API</h5>
<h5 id="482-应用程序拼板印章">4.8.2 应用程序拼板印章</h5>
<h4 id="49-画布间的复制">4.9 画布间的复制</h4>
<h4 id="410-使用像素检测物体碰撞">4.10 使用像素检测物体碰撞</h4>
<h5 id="4101-碰撞的对象">4.10.1 碰撞的对象</h5>
<h5 id="4102-如何检测物体碰撞">4.10.2 如何检测物体碰撞</h5>
<h5 id="4103-检查两个物体的重叠部分">4.10.3 检查两个物体的重叠部分</h5>
<h4 id="411-内容预告">4.11 内容预告</h4>
<h3 id="5-数学物理与动画">5 数学、物理与动画</h3>
<h4 id="51-直线移动">5.1 直线移动</h4>
<h5 id="511-两点间移动线段距离">5.1.1 两点间移动：线段距离</h5>
<h5 id="512-按照矢量移动">5.1.2 按照矢量移动</h5>
<h4 id="52-撞墙反弹">5.2 撞墙反弹</h4>
<h5 id="521-单个球反弹">5.2.1 单个球反弹</h5>
<h5 id="522-多球撞墙反弹">5.2.2 多球撞墙反弹</h5>
<h5 id="523-可动态调整画布大小的多球碰撞反弹">5.2.3 可动态调整画布大小的多球碰撞反弹</h5>
<h5 id="524-多球反弹和碰撞">5.2.4 多球反弹和碰撞</h5>
<h5 id="525-有摩擦力的多球碰撞反弹">5.2.5 有摩擦力的多球碰撞反弹</h5>
<h4 id="53-曲线和圆弧运动">5.3 曲线和圆弧运动</h4>
<h5 id="531-匀速圆周运动">5.3.1 匀速圆周运动</h5>
<h5 id="532-简单螺旋运动">5.3.2 简单螺旋运动</h5>
<h5 id="533-3次贝赛尔曲线运动">5.3.3 3次贝赛尔曲线运动</h5>
<h5 id="534-移动图像">5.3.4 移动图像</h5>
<h5 id="535-创建立方贝塞尔曲线环">5.3.5 创建立方贝塞尔曲线环</h5>
<h4 id="54-简单重力弹力及摩擦力">5.4 简单重力、弹力及摩擦力</h4>
<h5 id="541-简单重力">5.4.1 简单重力</h5>
<h5 id="542-带反弹的简单重力">5.4.2 带反弹的简单重力</h5>
<h5 id="543-重力反弹及应用简单弹力">5.4.3 重力反弹及应用简单弹力</h5>
<h5 id="544-简单重力弹力及摩擦力的综合">5.4.4 简单重力、弹力及摩擦力的综合</h5>
<h4 id="55-缓冲">5.5 缓冲</h4>
<h5 id="551-缓冲结束飞船着陆">5.5.1 缓冲结束（飞船着陆）</h5>
<h5 id="552-缓冲开始起飞">5.5.2 缓冲开始（起飞）</h5>
<h4 id="56-box2d和画布">5.6 Box2D和画布</h4>
<h5 id="561-下载box2dweb">5.6.1 下载Box2dWeb</h5>
<h5 id="562-box2d的工作原理">5.6.2 Box2D的工作原理</h5>
<h5 id="563-box2d的hello-world">5.6.3 Box2D的Hello World</h5>
<h5 id="564-引入框架库">5.6.4 引入框架库</h5>
<h5 id="565-创建box2dweb世界">5.6.5 创建Box2dWeb世界</h5>
<h5 id="566-box2dweb中的单位">5.6.6 Box2dWeb中的单位</h5>
<h5 id="567-在box2d中定义墙">5.6.7 在Box2D中定义墙</h5>
<h5 id="568-创建小球">5.6.8 创建小球</h5>
<h5 id="569-b2debugdraw渲染与canvas渲染的对比">5.6.9 b2debugDraw渲染与Canvas渲染的对比</h5>
<h5 id="5610-drawscreen函数">5.6.10 drawScreen()函数</h5>
<h5 id="5611-重温反弹球">5.6.11 重温反弹球</h5>
<h5 id="5612-转换为canvas">5.6.12 转换为Canvas</h5>
<h4 id="57-与box2d交互">5.7 与Box2D交互</h4>
<h5 id="571-创建箱子">5.7.1 创建箱子</h5>
<h5 id="572-渲染箱子">5.7.2 渲染箱子</h5>
<h5 id="573-增加互动效果">5.7.3 增加互动效果</h5>
<h5 id="574-创建箱子">5.7.4 创建箱子</h5>
<h5 id="575-处理小球">5.7.5 处理小球</h5>
<h4 id="58-关于box2d的更多内容">5.8 关于Box2D的更多内容</h4>
<h4 id="59-内容预告">5.9 内容预告</h4>
<h3 id="6-在画布中融合html5视频">6 在画布中融合HTML5视频</h3>
<h4 id="61-html5中对视频的支持">6.1 HTML5中对视频的支持</h4>
<h5 id="611-theora--vorbis--ogg">6.1.1 Theora + Vorbis = .ogg</h5>
<h5 id="612-h264----mp4">6.1.2 H.264 + $$$ = .mp4</h5>
<h5 id="613-vp8--vorbis--webm">6.1.3 VP8 + Vorbis = .webm</h5>
<h5 id="614-结合3种视频格式">6.1.4 结合3种视频格式</h5>
<h4 id="62-转换视频格式">6.2 转换视频格式</h4>
<h4 id="63-html5视频的基本实现方法">6.3 HTML5视频的基本实现方法</h4>
<h5 id="631-普通的视频嵌入方法">6.3.1 普通的视频嵌入方法</h5>
<h5 id="632-添加视频控制器并设置播放方式">6.3.2 添加视频控制器并设置播放方式</h5>
<h5 id="633-调整视频的宽度和高度">6.3.3 调整视频的宽度和高度</h5>
<h4 id="64-使用javascript预加载视频">6.4 使用JavaScript预加载视频</h4>
<h4 id="65-视频与画布">6.5 视频与画布</h4>
<h5 id="651-在html5-canvas上显示视频">6.5.1 在HTML5 Canvas上显示视频</h5>
<h5 id="652-html5的视频属性">6.5.2 HTML5的视频属性</h5>
<h4 id="66-在画布上使用视频的示例">6.6 在画布上使用视频的示例</h4>
<h5 id="661-使用currenttime属性创建视频事件">6.6.1 使用currentTime属性创建视频事件</h5>
<h5 id="662-在画布上旋转视频">6.6.2 在画布上旋转视频</h5>
<h5 id="663-在画布上制作视频拼图">6.6.3 在画布上制作视频拼图</h5>
<h5 id="664-在画布上创建视频控制器">6.6.4 在画布上创建视频控制器</h5>
<h4 id="67-回顾动画效果之移动视频">6.7 回顾动画效果之移动视频</h4>
<h4 id="68-使用javascript录制视频">6.8 使用JavaScript录制视频</h4>
<h5 id="681-网络rtc多媒体捕捉接口及数据流接口">6.8.1 网络RTC多媒体捕捉接口及数据流接口</h5>
<h5 id="682-例1播放视频">6.8.2 例1：播放视频</h5>
<h5 id="683-例2在canvas上播放视频并截图">6.8.3 例2：在Canvas上播放视频并截图</h5>
<h5 id="684-例3创建视频拼图">6.8.4 例3：创建视频拼图</h5>
<h4 id="69-移动端html5视频的支持状况">6.9 移动端HTML5视频的支持状况</h4>
<h4 id="610-内容预告">6.10 内容预告</h4>
<h3 id="7-使用音频">7 使用音频</h3>
<h4 id="71-标签">7.1 标签</audio></h4>
<h4 id="72-音频格式">7.2 音频格式</h4>
<h5 id="721-支持的音频格式">7.2.1 支持的音频格式</h5>
<h5 id="722-音频转换工具audacity">7.2.2 音频转换工具Audacity</h5>
<h5 id="723-示例使用所有3种音频格式">7.2.3 示例：使用所有3种音频格式</h5>
<h4 id="73-audio标签的属性函数和事件">7.3 Audio标签的属性、函数和事件</h4>
<h5 id="731-音频函数">7.3.1 音频函数</h5>
<h5 id="732-重要的音频属性">7.3.2 重要的音频属性</h5>
<h5 id="733-重要的音频事件">7.3.3 重要的音频事件</h5>
<h5 id="734-加载并播放音频">7.3.4 加载并播放音频</h5>
<h5 id="735-在画布上显示属性信息">7.3.5 在画布上显示属性信息</h5>
<h4 id="74-不使用audio标签播放声音">7.4 不使用Audio标签播放声音</h4>
<h5 id="741-使用javascript动态创建audio元素">7.4.1 使用JavaScript动态创建audio元素</h5>
<h5 id="742-查找支持的音频格式">7.4.2 查找支持的音频格式</h5>
<h5 id="743-播放声音">7.4.3 播放声音</h5>
<h5 id="744-不使用标签">7.4.4 不使用标签</h5>
<h4 id="75-创建画布音频播放器">7.5 创建画布音频播放器</h4>
<h5 id="751-在canvas中创建自定义用户控件">7.5.1 在Canvas中创建自定义用户控件</h5>
<h5 id="752-加载按钮资源">7.5.2 加载按钮资源</h5>
<h5 id="753-设置音频播放器的值">7.5.3 设置音频播放器的值</h5>
<h5 id="754-鼠标事件">7.5.4 鼠标事件</h5>
<h5 id="755-滑动播放指示器">7.5.5 滑动播放指示器</h5>
<h5 id="756-播放暂停按钮检测单击并获取位置">7.5.6 播放/暂停按钮：检测单击并获取位置</h5>
<h5 id="757-循环不循环切换按钮">7.5.7 循环/不循环切换按钮</h5>
<h5 id="758-单击并拖动音量滑块">7.5.8 单击并拖动音量滑块</h5>
<h4 id="76-音频案例太空掠夺者游戏">7.6 音频案例：太空掠夺者游戏</h4>
<h5 id="761-应用程序中不同的声音事件声音">7.6.1 应用程序中不同的声音——事件声音</h5>
<h5 id="762-迭代">7.6.2 迭代</h5>
<h5 id="763-太空掠夺者游戏框架">7.6.3 太空掠夺者游戏框架</h5>
<h5 id="764-第一次迭代使用单个对象播放声音">7.6.4 第一次迭代：使用单个对象播放声音</h5>
<h5 id="765-第二次迭代创建无限个动态声音对象">7.6.5 第二次迭代：创建无限个动态声音对象</h5>
<h5 id="766-第三次迭代创建一个声音池">7.6.6 第三次迭代：创建一个声音池</h5>
<h5 id="767-第四次迭代重用预加载的声音">7.6.7 第四次迭代：重用预加载的声音</h5>
<h4 id="77-web-audio-api">7.7 Web Audio API</h4>
<h5 id="771-什么是web-audio-api">7.7.1 什么是Web Audio API</h5>
<h5 id="772-使用web-audio-api开发太空掠夺者">7.7.2 使用Web Audio API开发太空掠夺者</h5>
<h4 id="78-内容预告">7.8 内容预告</h4>
<h3 id="8-canvas游戏上">8 Canvas游戏（上）</h3>
<h4 id="81-为什么用html5开发游戏">8.1 为什么用HTML5开发游戏</h4>
<h5 id="811-canvas与flash比较">8.1.1 Canvas与Flash比较</h5>
<h5 id="812-canvas提供的新特性">8.1.2 Canvas提供的新特性</h5>
<h4 id="82-游戏的基本html5文件">8.2 游戏的基本HTML5文件</h4>
<h4 id="83-游戏的设计">8.3 游戏的设计</h4>
<h4 id="84-游戏图形使用路径绘制">8.4 游戏图形：使用路径绘制</h4>
<h5 id="841-所需的资源">8.4.1 所需的资源</h5>
<h5 id="842-使用路径绘制游戏的主角">8.4.2 使用路径绘制游戏的主角</h5>
<h4 id="85-canvas上的动画">8.5 Canvas上的动画</h4>
<h5 id="851-游戏定时器循环">8.5.1 游戏定时器循环</h5>
<h5 id="852-玩家飞船的状态变化">8.5.2 玩家飞船的状态变化</h5>
<h4 id="86-对游戏图形应用形状变换">8.6 对游戏图形应用形状变换</h4>
<h5 id="canvas的栈">Canvas的栈</h5>
<h4 id="87-游戏图形变换">8.7 游戏图形变换</h4>
<h5 id="871-使玩家飞船绕中心旋转">8.7.1 使玩家飞船绕中心旋转</h5>
<h5 id="872-使用alpha通道实现飞船淡入">8.7.2 使用Alpha通道实现飞船淡入</h5>
<h4 id="88-游戏物体的物理算法和动画">8.8 游戏物体的物理算法和动画</h4>
<h5 id="881-移动玩家飞船">8.8.1 移动玩家飞船</h5>
<h5 id="882-使用键盘控制玩家飞船">8.8.2 使用键盘控制玩家飞船</h5>
<h5 id="883-设置玩家飞船的最大速度">8.8.3 设置玩家飞船的最大速度</h5>
<h4 id="89-基本游戏框架">8.9 基本游戏框架</h4>
<h5 id="891-游戏状态机">8.9.1 游戏状态机</h5>
<h5 id="892-更新渲染的重复周期">8.9.2 更新/渲染的重复周期</h5>
<h5 id="893-帧率计数器对象原型">8.9.3 帧率计数器对象原型</h5>
<h4 id="810-整合所有元素">8.10 整合所有元素</h4>
<h5 id="8101-geo-blaster游戏架构">8.10.1 Geo Blaster游戏架构</h5>
<h5 id="8102-geo-blaster全局游戏变量">8.10.2 Geo Blaster全局游戏变量</h5>
<h4 id="811-玩家对象">8.11 玩家对象</h4>
<h4 id="812-geo-blaster游戏的算法">8.12 Geo Blaster游戏的算法</h4>
<h5 id="8121-逻辑显示对象数组">8.12.1 逻辑显示对象数组</h5>
<h5 id="8122-级别难度控制">8.12.2 级别难度控制</h5>
<h5 id="8123-关卡和游戏结束">8.12.3 关卡和游戏结束</h5>
<h5 id="8124-奖励玩家另外的飞船">8.12.4 奖励玩家另外的飞船</h5>
<h5 id="8125-应用碰撞检测">8.12.5 应用碰撞检测</h5>
<h4 id="813-geo-blaster-basic的完整源代码">8.13 Geo Blaster Basic的完整源代码</h4>
<h4 id="814-陨石对象原型">8.14 陨石对象原型</h4>
<h4 id="815-在网格上使用a算法查找最短路径">8.15 在网格上使用A*算法查找最短路径</h4>
<h5 id="8151-什么是a算法">8.15.1 什么是A*算法</h5>
<h5 id="8152-在更大的地图上使用a">8.15.2 在更大的地图上使用A*</h5>
<h5 id="8153-可穿过对角线的a寻路算法">8.15.3 可穿过对角线的A*寻路算法</h5>
<h5 id="8154-在带权值节点的地图里使用a寻路算法">8.15.4 在带权值节点的地图里使用A*寻路算法</h5>
<h5 id="8155-带权值及穿越对角线功能的a寻路算法">8.15.5 带权值及穿越对角线功能的A*寻路算法</h5>
<h5 id="8156-让游戏角色顺着a最短路径移动">8.15.6 让游戏角色顺着A*最短路径移动</h5>
<h5 id="8157-坦克斜穿过墙壁">8.15.7 坦克斜穿过墙壁</h5>
<h4 id="816-内容预告">8.16 内容预告</h4>
<h3 id="9-canvas游戏下">9 Canvas游戏（下）</h3>
<h4 id="91-扩展版的geo-blaster">9.1 扩展版的Geo Blaster</h4>
<h5 id="911-geo-blaster的图片表">9.1.1 Geo Blaster的图片表</h5>
<h5 id="912-渲染其他游戏对象">9.1.2 渲染其他游戏对象</h5>
<h5 id="913-添加声音">9.1.3 添加声音</h5>
<h5 id="914-用对象池管理对象实例">9.1.4 用对象池管理对象实例</h5>
<h5 id="915-添加步长定时器">9.1.5 添加步长定时器</h5>
<h4 id="92-在运行时创建动态的图片表">9.2 在运行时创建动态的图片表</h4>
<h4 id="93-简单的基于区块的游戏">9.3 简单的基于区块的游戏</h4>
<h5 id="931-微型坦克迷宫的介绍">9.3.1 微型坦克迷宫的介绍</h5>
<h5 id="932-游戏中用到的图片表">9.3.2 游戏中用到的图片表</h5>
<h5 id="933-游戏区域">9.3.3 游戏区域</h5>
<h5 id="934-玩家">9.3.4 玩家</h5>
<h5 id="935-敌人">9.3.5 敌人</h5>
<h5 id="936-目标">9.3.6 目标</h5>
<h5 id="937-爆炸效果">9.3.7 爆炸效果</h5>
<h5 id="938-回合制游戏的流程和状态机">9.3.8 回合制游戏的流程和状态机</h5>
<h5 id="939-简单区块移动逻辑概述">9.3.9 简单区块移动逻辑概述</h5>
<h5 id="9310-渲染逻辑概述">9.3.10 渲染逻辑概述</h5>
<h5 id="9311-自定义简单人工智能概述">9.3.11 自定义简单人工智能概述</h5>
<h5 id="9312-微型坦克迷宫的完整游戏代码">9.3.12 微型坦克迷宫的完整游戏代码</h5>
<h4 id="94-为基于区块的游戏世界添加滚动效果">9.4 为基于区块的游戏世界添加滚动效果</h4>
<h5 id="941-第一步将用于绘制屏幕的区块放在一个图片表中">9.4.1 第一步：将用于绘制屏幕的区块放在一个图片表中</h5>
<h5 id="942-第二步用二维数组表示游戏世界">9.4.2 第二步：用二维数组表示游戏世界</h5>
<h5 id="943-第三步将基于区块的世界绘制在画布上">9.4.3 第三步：将基于区块的世界绘制在画布上</h5>
<h5 id="944-粗糙滚动与精确滚动">9.4.4 粗糙滚动与精确滚动</h5>
<h5 id="945-camera对象">9.4.5 camera对象</h5>
<h5 id="946-world对象">9.4.6 world对象</h5>
<h5 id="947-精确滚动时行和列的缓冲区">9.4.7 精确滚动时行和列的缓冲区</h5>
<h5 id="948-粗糙滚动的完整代码示例">9.4.8 粗糙滚动的完整代码示例</h5>
<h5 id="949-精确滚动的完整代码示例">9.4.9 精确滚动的完整代码示例</h5>
<h4 id="95-内容预告">9.5 内容预告</h4>
<h3 id="10-在移动设备上开发">10 在移动设备上开发</h3>
<h4 id="101-第一个应用程序">10.1 第一个应用程序</h4>
<h5 id="1011-代码">10.1.1 代码</h5>
<h5 id="1012-查看bsbingohtml的代码">10.1.2 查看BSBingo.html的代码</h5>
<h5 id="1013-应用程序代码">10.1.3 应用程序代码</h5>
<h5 id="1014-针对浏览器修改游戏">10.1.4 针对浏览器修改游戏</h5>
<h5 id="1015-在真实设备上测试游戏">10.1.5 在真实设备上测试游戏</h5>
<h4 id="102-触屏版的retro-blaster游戏">10.2 触屏版的Retro Blaster游戏</h4>
<h4 id="103-将触屏版retro-blaster移动化">10.3 将触屏版Retro Blaster移动化</h4>
<h5 id="1031-开发全屏游戏">10.3.1 开发全屏游戏</h5>
<h5 id="1032-触摸移动事件">10.3.2 触摸移动事件</h5>
<h5 id="1033-触屏版retro-blaster的完整代码">10.3.3 触屏版Retro Blaster的完整代码</h5>
<h4 id="104-超越canvas">10.4 超越Canvas</h4>
<h4 id="105-内容预告">10.5 内容预告</h4>
<h3 id="11-进一步探索">11 进一步探索</h3>
<h4 id="111-使用webgl实现3d效果">11.1 使用WebGL实现3D效果</h4>
<h5 id="1111-webgl是什么">11.1.1 WebGL是什么</h5>
<h5 id="1112-测试webgl">11.1.2 测试WebGL</h5>
<h5 id="1113-学习更多webgl的知识">11.1.3 学习更多WebGL的知识</h5>
<h5 id="1114-webgl应用示例">11.1.4 WebGL应用示例</h5>
<h5 id="1115-进一步探索webgl">11.1.5 进一步探索WebGL</h5>
<h5 id="1116-webgl的javascript类库">11.1.6 WebGL的JavaScript类库</h5>
<h4 id="112-使用electroserver-5实现多人应用程序">11.2 使用ElectroServer 5实现多人应用程序</h4>
<h5 id="1121-安装electroserver">11.2.1 安装ElectroServer</h5>
<h5 id="1122-套接字服务器程序的基础架构">11.2.2 套接字服务器程序的基础架构</h5>
<h5 id="1123-electroserver程序的基础架构">11.2.3 ElectroServer程序的基础架构</h5>
<h5 id="1124-使用electroserver创建聊天程序">11.2.4 使用ElectroServer创建聊天程序</h5>
<h5 id="1125-在google-chrome中测试应用程序">11.2.5 在Google Chrome中测试应用程序</h5>
<h5 id="1126-进一步探索electroserver">11.2.6 进一步探索ElectroServer</h5>
<h5 id="1127-这只是冰山一角">11.2.7 这只是冰山一角</h5>
<h4 id="113-为canvas创建一个简单对象框架">11.3 为Canvas创建一个简单对象框架</h4>
<h5 id="1131-创建一个支持拖放的应用程序">11.3.1 创建一个支持拖放的应用程序</h5>
<h5 id="1132-应用程序设计">11.3.2 应用程序设计</h5>
<h4 id="114-windows-8应用与html5-canvas">11.4 Windows 8应用与HTML5 Canvas</h4>
<h4 id="115-html51与canvas-level-2中有什么">11.5 HTML5.1与Canvas Level 2中有什么</h4>
<h5 id="1151-html51-canvas-context">11.5.1 HTML5.1 Canvas Context</h5>
<h5 id="1152-canvas-level2">11.5.2 Canvas Level2</h5>
<h4 id="116-总结">11.6 总结</h4>
<h3 id="附录-完整代码列表">附录 完整代码列表</h3>
<h3 id="思维导图">思维导图</h3>
<p><img src="http://www.processon.com/chart_image/5e5b35b5e4b03627650b141a.png"></p>
<p>防止博客图床图片失效，防止图片源站外链：</p>
<p>http://www.processon.com/chart_image/5e5b35b5e4b03627650b141a.png)</p>
<p>思维导图在线编辑链接：</p>
<p>https://www.processon.com/view/5e5b35b5e4b03627650b1417</p><br><br>
来源：https://www.cnblogs.com/jingle1267/p/12875435.html
頁:
[1]