全书共分9章，第1章介绍了canvas元素及如何在网络应用程序中使用它；第2章深入研究了如何使用Canvas的API进行绘制；第3章告诉读者如何绘制并操作canvas中的文本；第4章专门讲解图像、图像的操作及视频处理；第5章介绍如何实现平滑的动画效果；第6章讲解如何用JavaScript语言来实现精灵；第7章展示了如何在动画中模拟物理效果；第8章介绍了进行碰撞检测所用的技术；第9章以一个简单但是高效的游戏引擎开始，提供了游戏制作所需的全部支持功能；第10章讨论了实现定制控件的通用方法；第11章专门讲述如何实现基于Canvas的手机应用程序。
HTML5是一个富有活力的前沿领域，虽说早在2008年年初就发布了第1份草案，然而该标准的流行则是2010年之后的事情了。
HTML5技术的兴起有多方面的原因。其中比较重要的一点就是，1999年制定的HTML4.01标准在十几年后已经无法满足急速增长的网络开发需求了。与传统的“服务器-客户端”架构相比，越来越多的开发者开始选择以网页的形式来制作应用软件与游戏。这样做能够降低维护成本，将原来更新客户端所花的精力投入到网页程序的完善之上，以便更加及时地满足新出现的客户需求。如此一来，怎样弥补网页程序在图形绘制、设备底层功能调用、文件访问、影音播放等方面的劣势，就成为制定新标准时必须考虑的问题了。HTML5标准新增的各类API能够很好地应对这些状况。
此外，近年来日益兴起的移动开发也引发了人们对HTML5技术的关注。在传统的开发方式中，我们必须移植出版本繁多的客户端，以应对那些操作系统、屏幕大小、硬件配置各不相同的手机及平板电脑。如果我们将这种开发流程以HTML5应用的形式统一起来，那么就可以省去在各种设备之间进行移植所带来的问题。
不论是在传统的桌面操作系统之上，还是在新兴的移动设备之中，各大浏览器厂商都在努力适应新的HTML5标准，力求提供一套功能丰富而且外观统一的API。尽管HTML5标准仍在不停地更新之中，但是其基本开发思路已经受到众多开发者及用户的肯定。所以说，在HTML5标准最终定型之前，提前学习新标准，及早推出开发成本适中而且产品内容丰富的各类HTML5网络应用软件与游戏，不仅可以提高自身的技术能力，还可以把握软件市场的走向，总体来看，是一项明智的抉择。
网络应用开发是一项外延很广的领域，在企业级开发中，我们要学习各种服务器通信技术、软件架构及开发框架，而在另外一些实用软件及游戏的开发中，则又需要投入大量时间进行网页前端的美化。从开发者学习知识的角度看，如果将HTML、JavaScript、CSS等制作网络应用程序所需的技术分开研究，则难以把握它们之间的联系，本书的出现正好解决了这个问题。选择Canvas为切入点是恰到好处的，因为在各类网络应用软件与游戏中，都要或多或少地用到与绘制相关的功能。如果能够将网页开发常用的HTML、JavaScript、CSS等技术有机地结合起来，那么就可以充分地发挥Canvas在绘图方面的优势，制作出效果可与原生应用程序相媲美的产品来。
研究Canvas的另一个好处是，我们在学习它的同时，还能掌握与之相关的各项实用技术，诸如图形与曲线的编辑、文本的绘制与输入、图像滤镜，等等。在学习这些技术的过程中，读者将会逐步掌握如何通过JavaScript代码来动态地运用Canvas所提供的各项功能。本书后半部分集中讲解了Canvas的几项重要用途，包括动画与精灵、游戏物理学、碰撞检测、游戏开发，等等。借助一个精美的弹珠台游戏，作者将这些重要技术详细而深入地讲解了一番，学习这部分内容将有助于提高图形开发及游戏制作的水平。
全书最后不仅演示了如何实现圆角矩形、滚动条、滑动条及图像查看器等自定义控件，而且还教给大家实现这些自定义控件所遵循的流程，使我们能够用相似的办法实现一大批符合自己需求的新控件来。此外，作者还详细介绍了如何让开发出来的应用程序能够更好地运行于各类移动设备之上。
本书作者清晰而又透彻的行文风格，不仅把图形绘制、动画制作、游戏开发、自定义控件、移动开发等几项重要知识讲解得十分精彩，而且还启迪了我们的开发思路。读完全书之后，大家更需要思考如何利用JavaScript程序，将类似Canvas这样的新兴技术与传统的HTML、CSS结合起来，开发出更加丰富灵活的网络应用程序来。
在本书的翻译过程中，我得到了机械工业出版社华章公司各位编辑及工作人员的帮助，在此表示由衷的感谢。
本书由爱飞翔翻译，王鹏、舒亚林及张军也参与了部分翻译工作。译者非常愿意与诸位朋友通过微博（weibo.com/eastarlee）或电子邮件（eastarstormlee@gmail.com）探讨各类HTML5技术问题。由于水平有限，错误和不当之处在所难免，敬请广大读者批评指正。
封面图
目录
- 译者序
- 前言
- 第1章基础知识1
- 1.1canvas元素1
- 1.1.1canvas元素的大小与绘图表面的大小4
- 1.1.2canvas元素的API5
- 1.2Canvas的绘图环境6
- 1.2.12d绘图环境6
- 1.2.2Canvas状态的保存与恢复8
- 1.3本书程序清单的规范格式9
- 1.4开始学习HTML510
- 1.4.1规范10
- 1.4.2浏览器11
- 1.4.3控制台与调试器11
- 1.4.4性能13
- 1.5基本的绘制操作15
- 1.6事件处理18
- 1.6.1鼠标事件18
- 1.6.2键盘事件22
- 1.6.3触摸事件23
- 1.7绘制表面的保存与恢复23
- 1.8在Canvas中使用HTML元素25
- 1.9打印Canvas的内容32
- 1.10离屏canvas35
- 1.11基础数学知识简介37
- 1.11.1求解代数方程37
- 1.11.2三角函数38
- 1.11.3向量运算39
- 1.11.4根据计量单位来推导等式42
- 1.12总结44
- 第2章绘制45
- 2.1坐标系统46
- 2.2Canvas的绘制模型47
- 2.3矩形的绘制48
- 2.4颜色与透明度50
- 2.5渐变色与图案52
- 2.5.1渐变色52
- 2.5.2图案54
- 2.6阴影57
- 2.7路径、描边与填充60
- 2.7.1路径与子路径63
- 2.7.2剪纸效果64
- 2.8线段69
- 2.8.1线段与像素边界70
- 2.8.2网格的绘制71
- 2.8.3坐标轴的绘制72
- 2.8.4橡皮筋式的线条绘制74
- 2.8.5虚线的绘制79
- 2.8.6通过扩展CanvasRenderingContext2D来绘制虚线80
- 2.8.7线段端点与连接点的绘制81
- 2.9圆弧与圆形的绘制83
- 2.9.1arc()方法的用法83
- 2.9.2以橡皮筋式辅助线来协助用户画圆85
- 2.9.3arcTo()方法的用法86
- 2.9.4刻度仪表盘的绘制88
- 2.10贝塞尔曲线93
- 2.10.1二次方贝塞尔曲线93
- 2.10.2三次方贝塞尔曲线95
- 2.11多边形的绘制97
- 2.12高级路径操作102
- 2.12.1拖动多边形对象102
- 2.12.2编辑贝塞尔曲线107
- 2.12.3自动滚动网页，使某段路径所对应的元素显示在视窗中115
- 2.13坐标变换116
- 2.13.1坐标系的平移、缩放与旋转116
- 2.13.2自定义的坐标变换119
- 2.14图像合成123
- 2.15剪辑区域128
- 2.15.1通过剪辑区域来擦除图像128
- 2.15.2利用剪辑区域来制作伸缩式动画133
- 2.16总结135
- 第3章文本137
- 3.1文本的描边与填充137
- 3.2设置字型属性141
- 3.3文本的定位144
- 3.3.1水平与垂直定位144
- 3.3.2将文本居中146
- 3.3.3文本的度量147
- 3.3.4绘制坐标轴旁边的文本标签148
- 3.3.5绘制数值仪表盘周围的文本标签151
- 3.3.6在圆弧周围绘制文本152
- 3.4实现文本编辑控件154
- 3.4.1指示文本输入位置的光标154
- 3.4.2在Canvas中编辑文本159
- 3.4.3文本段的编辑163
- 3.5总结174
- 第4章图像与视频175
- 4.1图像的绘制176
- 4.1.1在Canvas之中绘制图像176
- 4.1.2drawImage()方法的用法177
- 4.2图像的缩放179
- 4.3将一个Canvas绘制到另一个Canvas之中183
- 4.4离屏canvas186
- 4.5操作图像的像素189
- 4.5.1获取图像数据189
- 4.5.2修改图像数据195
- 4.6结合剪辑区域来绘制图像208
- 4.7以图像制作动画211
- 4.8图像绘制的安全问题216
- 4.9性能216
- 4.9.1对比drawImage(HTMLImage)、drawImage(HTMLCanvas)与putImageData()的绘图效率217
- 4.9.2在Canvas中绘制另一个Canvas与绘制普通图像之间的对比；在绘制时缩放图像与保持原样之间的对比217
- 4.9.3遍历图像数据218
- 4.10放大镜222
- 4.10.1使用离屏canvas224
- 4.10.2接受用户从文件系统中拖放进来的图像225
- 4.11视频处理227
- 4.11.1视频格式227
- 4.11.2在Canvas中播放视频229
- 4.11.3视频处理230
- 4.12总结234
- 第5章动画235
- 5.1动画循环235
- 5.1.1通过requestAnimationFrame()方法让浏览器来自行决定帧速率237
- 5.1.2Internet Explorer浏览器对requestAnimationFrame()功能的实现241
- 5.1.3可移植于各浏览器平台的动画循环逻辑241
- 5.2帧速率的计算248
- 5.3以不同的帧速率来执行各种任务249
- 5.4恢复动画背景250
- 5.4.1利用剪辑区域来处理动画背景250
- 5.4.2利用图块复制技术来处理动画背景252
- 5.5利用双缓冲技术绘制动画253
- 5.6基于时间的运动254
- 5.7背景的滚动257
- 5.8视差动画261
- 5.9用户手势264
- 5.10定时动画266
- 5.10.1秒表266
- 5.10.2动画计时器269
- 5.11动画制作的最佳指导原则270
- 5.12总结271
- 第6章精灵272
- 6.1精灵概述273
- 6.2精灵绘制器275
- 6.2.1描边与填充绘制器275
- 6.2.2图像绘制器279
- 6.2.3精灵表绘制器281
- 6.3精灵对象的行为284
- 6.3.1将多个行为组合起来285
- 6.3.2限时触发的行为287
- 6.4精灵动画制作器289
- 6.5基于精灵的动画循环293
- 6.6总结294
- 第7章物理效果295
- 7.1重力295
- 7.1.1物体的下落296
- 7.1.2抛射体弹道运动298
- 7.1.3钟摆运动307
- 7.2时间轴扭曲311
- 7.3时间轴扭曲函数315
- 7.4时间轴扭曲运动317
- 7.4.1没有加速度的线性运动319
- 7.4.2逐渐加速的缓入运动320
- 7.4.3逐渐减速的缓出运动322
- 7.4.4缓入缓出运动323
- 7.4.5弹簧运动与弹跳运动324
- 7.5以扭曲后的帧速率播放动画326
- 7.6总结332
- 第8章碰撞检测333
- 8.1外接图形判别法333
- 8.1.1外接矩形判别法333
- 8.1.2外接圆判别法334
- 8.2碰到墙壁即被弹回的小球336
- 8.3光线投射法337
- 8.4分离轴定理（SAT）与最小平移向量（MTV）340
- 8.4.1使用分割轴定理检测碰撞340
- 8.4.2根据最小平移向量应对碰撞362
- 8.5总结373
- 第9章游戏开发374
- 9.1游戏引擎374
- 9.1.1游戏循环376
- 9.1.2加载图像382
- 9.1.3同时播放多个声音384
- 9.1.4键盘事件385
- 9.1.5高分榜386
- 9.1.6游戏引擎源代码387
- 9.2游戏原型395
- 9.2.1游戏原型程序的HTML代码396
- 9.2.2原型程序的游戏循环399
- 9.2.3游戏原型程序的加载画面400
- 9.2.4暂停画面402
- 9.2.5按键监听器404
- 9.2.6游戏结束及高分榜404
- 9.3弹珠台游戏407
- 9.3.1游戏循环弹珠408
- 9.3.2弹珠精灵410
- 9.3.3重力与摩擦力411
- 9.3.4弹板的移动412
- 9.3.5处理键盘事件413
- 9.3.6碰撞检测416
- 9.4总结425
- 第10章自定义控件 426
- 10.1圆角矩形控件427
- 10.2进度条控件433
- 10.3滑动条控件437
- 10.4图像查看器控件446
- 10.5总结454
- 第11章移动平台开发455
- 11.1移动设备的视窗456
- 11.2媒体特征查询技术461
- 11.2.1媒体特征查询与CSS461
- 11.2.2用JavaScript程序应对媒体特征的变化462
- 11.3触摸事件464
- 11.3.1TouchEvent对象464
- 11.3.2TouchList对象465
- 11.3.3Touch对象466
- 11.3.4同时支持触摸事件与鼠标事件466
- 11.3.5手指缩放468
- 11.4iOS5469
- 11.4.1应用程序图标及启动画面469
- 11.4.2利用媒体特征查询技术设置iOS5系统的应用程序图标及启动画面470
- 11.4.3以不带浏览器饰件的全屏模式运行应用程序471
- 11.4.4应用程序的状态栏471
- 11.5虚拟键盘472
- 11.6总结485
