HTML5 Canvas开发详解（第二版）

HTML5Canvas开发详解（第二版）目录\h第1章HTML5Canvas简介\h1.1什么是HTML5\h1.2基础的HTML5页面\h1.2.1<!doctypehtml>\h1.2.2<htmllang="en">\h1.2.3<metacharset="UTF-8">\h1.2.4<title>…</title>\h1.2.5一个简单的HTML5页面\h1.3本书使用的基础HTML页面\h1.3.1<div>\h1.3.2<canvas>\h1.4文档对象模型（DOM）和Canvas\h1.5JavaScript和Canvas\hJavaScript放置的位置及其理由\h1.6HTML5Canvas版“HelloWorld！”\h1.6.1为Canvas封装JavaScript代码\h1.6.2将Canvas添加到HTML页面中\h1.6.3检测浏览器是否支持Canvas\h1.6.4获得2D环境\h1.6.5drawScreen()函数\h1.7用console.log调试\h1.82D环境及其当前状态\h1.9HTML5Canvas对象\h1.10第二个示例：猜字母\h1.10.1游戏如何工作\h1.10.2“猜字母”游戏的变量\h1.10.3initGame()函数\h1.10.4eventKeyPressed()函数\h1.10.5drawScreen()函数\h1.10.6导出Canvas到图像\h1.10.7最终的游戏代码\h1.11动画版本的HelloWorld\h1.11.1一些必要的属性\h1.11.2动画循环\h1.11.3使用globalAlpha属性设置alpha透明度\h1.11.4清除并显示背景\h1.11.5更新globalAlpha属性\h1.11.6绘制文字\h1.11.7HTML5Canvas实现无障碍访问：子dom\h1.12内容预告\h第2章在Canvas上绘图\h2.1本章基本文件设置\h2.2基本矩形\h2.3Canvas状态\h2.3.1什么不属于状态\h2.3.2如何保存和恢复Canvas状态\h2.4使用路径创建线段\h2.4.1设置路径的开始和结束\h2.4.2动态绘图\h2.4.3高级线段绘制举例\h2.5高级路径方法\h2.5.1弧线\h2.5.2贝塞尔曲线\h2.5.3Canvas裁切区域\h2.6在画布上合成\h2.7简单画布变换\h2.7.1旋转和平移变换\h2.7.2缩放变换\h2.7.3缩放和旋转组合变换\h2.8用颜色和渐变填充对象\h2.8.1基本填充颜色设置\h2.8.2填充渐变形状\h2.9用图案填充形状\h2.10创建阴影\h2.11清除画布的方法\h2.11.1简单填充\h2.11.2重置画布的宽和高\h2.11.3重新设置画布的clearRect函数\h2.12检查一个点是否在当前路径\h2.13绘制一个焦点环\h2.14内容预告\h第3章HTML5Canvas的文本API\h3.1显示基本文本\h3.1.1基本文本显示\h3.1.2在TextArranger中处理基本文本\h3.1.3HTML表单和画布之间的通信\h3.1.4使用measureText\h3.1.5fillText和strokeText\h3.2设置文本字体\h3.2.1字体大小、磅重和样式基础\h3.2.2在文本编辑器中处理字体大小和外观\h3.2.3字体颜色\h3.2.4字体基线和对齐\h3.2.5TextArranger2.0版\h3.3文本和Canvas上下文\h3.3.1全局alpha和文本\h3.3.2全局阴影和文本\h3.4文本渐变和图案\h3.4.1文本线性渐变\h3.4.2文本径向渐变\h3.4.3文本图像图案\h3.4.4在TextArranger中处理渐变和图案\h3.5宽度、高度、缩放和toDataURL()回顾\h3.5.1动态调整画布尺寸\h3.5.2动态缩放画布\h3.5.3Canvas对象的toDataURL()方法\h3.6最终版的TextArranger\h3.7渐变动画\h3.8Canvas里文本的未来\h3.8.1CSS文本\h3.8.2文本的无障碍访问\h3.9内容预告\h第4章Canvas图像\h4.1本章的基本文件设置\h4.2图像基础\h4.2.1预下载图像\h4.2.2使用drawImage()函数在画布上显示图像\h4.2.3调整画布上图像的大小\h4.2.4将部分图像复制到画布\h4.3简单的帧式动画\h4.3.1创建动画帧计数器\h4.3.2创建一个计时循环\h4.3.3改变拼板显示\h4.4高级帧式动画\h4.4.1检查拼图\h4.4.2创建动画数组\h4.4.3选择拼板显示\h4.4.4在拼板中循环\h4.4.5绘制拼板\h4.4.6在整个画布上移动图像\h4.5在图像上应用旋转变换\h4.5.1画布变换基础\h4.5.2为变换的图像设置动画\h4.6创建一个拼板网格\h4.6.1定义拼板地图\h4.6.2用Tiled创建拼板地图\h4.6.3在画布上显示地图\h4.7通过大图片深入了解绘图属性\h4.7.1为图像创建一个窗口\h4.7.2绘制图像窗口\h4.7.3修改图片容器的属性\h4.7.4缩放图像\h4.7.5平移图片\h4.7.6同时对图片进行移动和缩放\h4.8像素操作\h4.8.1操作画布像素的API\h4.8.2应用程序拼板印章\h4.9画布间的复制\h4.10使用像素检测物体碰撞\h4.10.1碰撞的对象\h4.10.2如何检测物体碰撞\h4.10.3检查两个物体的重叠部分\h4.11内容预告\h第5章数学、物理与动画\h5.1直线移动\h5.1.1两点间移动：线段距离\h5.1.2按照矢量移动\h5.2撞墙反弹\h5.2.1单个球反弹\h5.2.2多球撞墙反弹\h5.2.3可动态调整画布大小的多球碰撞反弹\h5.2.4多球反弹和碰撞\h5.2.5有摩擦力的多球碰撞反弹\h5.3曲线和圆弧运动\h5.3.1匀速圆周运动\h5.3.2简单螺旋运动\h5.3.33次贝赛尔曲线运动\h5.3.4移动图像\h5.3.5创建立方贝塞尔曲线环\h5.4简单重力、弹力及摩擦力\h5.4.1简单重力\h5.4.2带反弹的简单重力\h5.4.3重力反弹及应用简单弹力\h5.4.4简单重力、弹力及摩擦力的综合\h5.5缓冲\h5.5.1缓冲结束（飞船着陆）\h5.5.2缓冲开始（起飞）\h5.6Box2D和画布\h5.6.1下载Box2dWeb\h5.6.2Box2D的工作原理\h5.6.3Box2D的HelloWorld\h5.6.4引入框架库\h5.6.5创建Box2dWeb世界\h5.6.6Box2dWeb中的单位\h5.6.7在Box2D中定义墙\h5.6.8创建小球\h5.6.9b2debugDraw渲染与Canvas渲染的对比\h5.6.10drawScreen()函数\h5.6.11重温反弹球\h5.6.12转换为Canvas\h5.7与Box2D交互\h5.7.1创建箱子\h5.7.2渲染箱子\h5.7.3增加互动效果\h5.7.4创建箱子\h5.7.5处理小球\h5.8关于Box2D的更多内容\h5.9内容预告\h第6章在画布中融合HTML5视频\h6.1HTML5中对视频的支持\h6.1.1Theora+Vorbis=.ogg\h6.1.2H.264+$$$=.mp4\h6.1.3VP8+Vorbis=.webm\h6.1.4结合3种视频格式\h6.2转换视频格式\h6.3HTML5视频的基本实现方法\h6.3.1普通的视频嵌入方法\h6.3.2添加视频控制器并设置播放方式\h6.3.3调整视频的宽度和高度\h6.4使用JavaScript预加载视频\h6.5视频与画布\h6.5.1在HTML5Canvas上显示视频\h6.5.2HTML5的视频属性\h6.6在画布上使用视频的示例\h6.6.1使用currentTime属性创建视频事件\h6.6.2在画布上旋转视频\h6.6.3在画布上制作视频拼图\h6.6.4在画布上创建视频控制器\h6.7回顾动画效果之移动视频\h6.8使用JavaScript录制视频\h6.8.1网络RTC多媒体捕捉接口及数据流接口\h6.8.2例1：播放视频\h6.8.3例2：在Canvas上播放视频并截图\h6.8.4例3：创建视频拼图\h6.9移动端HTML5视频的支持状况\h6.10内容预告\h第7章使用音频\h7.1<audio>标签\h7.2音频格式\h7.2.1支持的音频格式\h7.2.2音频转换工具Audacity\h7.2.3示例：使用所有3种音频格式\h7.3Audio标签的属性、函数和事件\h7.3.1音频函数\h7.3.2重要的音频属性\h7.3.3重要的音频事件\h7.3.4加载并播放音频\h7.3.5在画布上显示属性信息\h7.4不使用Audio标签播放声音\h7.4.1使用JavaScript动态创建audio元素\h7.4.2查找支持的音频格式\h7.4.3播放声音\h7.4.4不使用标签\h7.5创建画布音频播放器\h7.5.1在Canvas中创建自定义用户控件\h7.5.2加载按钮资源\h7.5.3设置音频播放器的值\h7.5.4鼠标事件\h7.5.5滑动播放指示器\h7.5.6播放/暂停按钮：检测单击并获取位置\h7.5.7循环/不循环切换按钮\h7.5.8单击并拖动音量滑块\h7.6音频案例：太空掠夺者游戏\h7.6.1应用程序中不同的声音——事件声音\h7.6.2迭代\h7.6.3太空掠夺者游戏框架\h7.6.4第一次迭代：使用单个对象播放声音\h7.6.5第二次迭代：创建无限个动态声音对象\h7.6.6第三次迭代：创建一个声音池\h7.6.7第四次迭代：重用预加载的声音\h7.7WebAudioAPI\h7.7.1什么是WebAudioAPI\h7.7.2使用WebAudioAPI开发太空掠夺者\h7.8内容预告\h第8章Canvas游戏（上）\h8.1为什么用HTML5开发游戏\h8.1.1Canvas与Flash比较\h8.1.2Canvas提供的新特性\h8.2游戏的基本HTML5文件\h8.3游戏的设计\h8.4游戏图形：使用路径绘制\h8.4.1所需的资源\h8.4.2使用路径绘制游戏的主角\h8.5Canvas上的动画\h8.5.1游戏定时器循环\h8.5.2玩家飞船的状态变化\h8.6对游戏图形应用形状变换\hCanvas的栈\h8.7游戏图形变换\h8.7.1使玩家飞船绕中心旋转\h8.7.2使用Alpha通道实现飞船淡入\h8.8游戏物体的物理算法和动画\h8.8.1移动玩家飞船\h8.8.2使用键盘控制玩家飞船\h8.8.3设置玩家飞船的最大速度\h8.9基本游戏框架\h8.9.1游戏状态机\h8.9.2更新/渲染的重复周期\h8.9.3帧率计数器对象原型\h8.10整合所有元素\h8.10.1GeoBlaster游戏架构\h8.10.2GeoBlaster全局游戏变量\h8.11玩家对象\h8.12GeoBlaster游戏的算法\h8.12.1逻辑显示对象数组\h8.12.2级别难度控制\h8.12.3关卡和游戏结束\h8.12.4奖励玩家另外的飞船\h8.12.5应用碰撞检测\h8.13GeoBlasterBasic的完整源代码\h8.14陨石对象原型\h8.15在网格上使用A*算法查找最短路径\h8.15.1什么是A*算法\h8.15.2在更大的地图上使用A*\h8.15.3可穿过对角线的A*寻路算法\h8.15.4在带权值节点的地图里使用A*寻路算法\h8.15.5带权值及穿越对角线功能的A*寻路算法\h8.15.6让游戏角色顺着A*最短路径移动\h8.15.7坦克斜穿过墙壁\h8.16内容预告\h第9章Canvas游戏（下）\h9.1扩展版的GeoBlaster\h9.1.1GeoBlaster的图片表\h9.1.2渲染其他游戏对象\h9.1.3添加声音\h9.1.4用对象池管理对象实例\h9.1.5添加步长定时器\h9.2在运行时创建动态的图片表\h9.3简单的基于区块的游戏\h9.3.1微型坦克迷宫的介绍\h9.3.2游戏中用到的图片表\h9.3.3游戏区域\h9.3.4玩家\h9.3.5敌人\h9.3.6目标\h9.3.7爆炸效果\h9.3.8回合制游戏的流程和状态机\h9.3.9简单区块移动逻辑概述\h9.3.10渲染逻辑概述\h9.3.11自定义简单人工智能概述\h9.3.12微型坦克迷宫的完整游戏代码\h9.4为基于区块的游戏世界添加滚动效果\h9.4.1第一步：将用于绘制屏幕的区块放在一个图片表中\h9.4.2第二步：用二维数组表示游戏世界\h9.4.3第三步：将基于区块的世界绘制在画布上\h9.4.4粗糙滚动与精确滚动\h9.4.5camera对象\h9.4.6world对象\h9.4.7精确滚动时行和列的缓冲区\h9.4.8粗糙滚动的完整代码示例\h9.4.9精确滚动的完整代码示例\h9.5内容预告\h第10章在移动设备上开发\h10.1第一个应用程序\h10.1.1代码\h10.1.2查看BSBingo.html的代码\h10.1.3应用程序代码\h10.1.4针对浏览器修改游戏\h10.1.5在真实设备上测试游戏\h10.2触屏版的RetroBlaster游戏\h10.3将触屏版RetroBlaste