
前言
作为资深的视频游戏开发人员,我已经习惯于和高性能的编程语言和硬件打交道,因此刚开始我并没有对JavaScript进行图形编程有太高的期望。不过后来发现,实际上JavaScript是一个优秀和高效的编程语言,而且随着更好的浏览器支持、本身的性能提升,以及新的工具库加入,JavaScript还在不断变好。JavaScript结合了HTML5 Canvas等特性,给Web开发人员提供了真正可以不用Adobe Flash等插件的方案。而WebGL等特性则为使用JavaScript和浏览器进行图形编程描绘了非常美好的未来。
这本书的目标读者需要具备一定的JavaScript知识,并且想要学习真正的Web图形编程,而不仅仅依赖于jQuery这样的库做一些动画特效。本书中涵盖了下面这些内容:
如何重用和优化代码,包括继承技术和性能优化经验;
用普通的DOM操作(DHTML)来构建图形化应用;
使用更高级的画布元素;
创建视频游戏;
创建图形和动画所需的数学;
使用谷歌可视化API和画图工具来呈现你的数据;
如何有效使用jQuery并开发面向图形的jQuery插件;
使用jQuery Mobile创建适合移动设备的图形Web应用;
使用PhoneGap将你的Web应用转换为本地Android应用。
本书将带你了解不同的图形编程技术,你可以进一步探索自己感兴趣的领域。
多做尝试,你会获得很多乐趣!
目标读者
打算阅读本书的读者应该对网站和Web应用开发,特别是JavaScript,具有一定知识和使用经验。
为了方便开发和表达,本书的许多示例代码都使用了jQuery。一般来说,本书中用到的所有外部库及其文件都可以从谷歌等可靠的内容分发网络获取。
另外,本书用到了一些基础的数学知识,包括向量和三角函数。
本书组织结构
本书节奏较快,读者从第1章中就可以看到第一个图形编程的示例。
剩余章节涉及多个图形相关的技术,这些技术可以给你的Web应用增加视觉冲击力和交互性。
讨论交互式图形的书无法避开视频游戏。本书中将开发一个完整的视频游戏应用,并讨论相关的子图和滚动等技术。
本书每章的内容可以总结如下。
第1章,代码重用和优化
本章讨论JavaScript面向对象编程技术,以及图形应用中涉及的代码优化(包括jQuery优化)。本章甚至将介绍如何使用鲜为人知的JavaScript位操作符进行性能优化。
第2章,DHTML基础
本章展示了如何使用普通的DOM操作(DHTML)创建图形应用。我们将在本章开发一个适用于游戏和其他场景的子图系统,并将其以jQuery插件的形式封装。
第3章,滚动
本章首先讨论了CSS滚动技术,包括视差特效。然后本章将介绍基于JavaScript的滚动技术,以及基于块的视差卷轴特效。我们还将介绍一个强大的地图编辑器,用于创建基于块的地图。
第4章,高级UI
本章覆盖了jQuery UI和Ext JS两个UI库。我们将探讨两个库的不同工作方式和各自适合的应用类型。另外,我们还将构建一个三维旋转木马的示例。
第5章,JavaScript游戏介绍
本章演示了如何用开放Web技术,而不是Flash插件来构建有趣的Web游戏。我们将通过开发一个怀旧的视频游戏来说明我们讨论的技术。
第6章,HTML5画布
本章通过许多示例来深入介绍Canvas元素,包括如何使用Canvas和WebSockets创建一个图形化的聊天应用。其中涉及的画布主题包括:绘制、描边、填充、渐变、递归绘制、位图和动画。
第7章,游戏和模拟中的向量
本章介绍图形应用和游戏中广为使用的二维向量。代码示例包括大炮和火箭的模拟。
第8章,谷歌可视化
本章使用谷歌图表工具来对多种数据进行可视化,从基本的饼图到仪表图。本章不仅介绍了静态的可视化图形,而且覆盖了交互式的可视化图表,以及必要的数据格式化技术。
第9章,使用jQuery Mobile为移动设备开发
本章描述了jQuery Mobile,一个基于jQuery的、面向移动设备的开发框架。jQuery Mobile可以将普通的HTML页面转化为交互式和动画式的手机体验。本章中的主要例子是一个使用jQuery UI、面向移动设备的图形化滑动解谜游戏。
第10章,用PhoneGap创建Android应用
本章介绍如何使用PhoneGap将Web应用转换为手机的本地应用。本章解释了如何安装和配置PhoneGap来创建本地Android应用。在此之后,我们将把第9章的滑动解谜游戏转换为可以部署到移动设备上的本地应用。
本书的惯例
提示
这个图标用来强调一个提示、建议或一般说明。
警告
这个图标用来说明一个警告或注意事项。
本书中提到一些有用的网站和页面,通常除了页面URL外,还会提供页面名称。
因此你可以选择直接输入URL或者通过搜索引擎搜索页面名称,找到相关页面,
可以在地址比较复杂,或页面地址被改变时使用后者。
代码示例的使用
本书包含许多代码片段、示例和一些完整充实的应用。有时手动输入代码很麻烦,因此推荐从本书的代码库中复制代码。本书的许多代码中穿插了普通文本,直接从代码库复制代码可以避免你去拼接不同位置的代码。
在本书的HTML页面示例中,大部分使用HTML5文档类型:
<!DOCTYPE html>
为方便起见,示例中的所有CSS样式都被直接嵌入HTML页面。在实际Web应用开发中,还是推荐使用外部文件保存CSS样式。本书的示例代码可以在 http://www.professorcloud. com/supercharged中找到。
目标浏览器
本书绝大部分示例代码都可以在较新的浏览器上工作,比如:
Firefox 3.6x+
Safari 4.0x+
Opera 10.x+
Chrome 5.x+
Internet Explorer 8+
有些例子甚至可以在IE6和IE7上工作。
这些例子在Windows XP、Windows Vista和Windows 7上进行了完整测试,在iOS上进行了部分测试。理论上,这些例子也应能在上述浏览器的Linux版本上工作。
画布(Canvas)标签的使用则限于支持画布的浏览器,对IE来说,只有IE9可以(无需额外插件或库)直接支持。
有少量的例子需要特殊的环境,比如手机开发环境(PhoneGap)、服务器语言(PHP)或特殊浏览器。
如果是这种情况,书中会提到相关环境的设置和配置。
Safari®在线图书
Safari在线图书是一个按需订阅的数字图书馆。它有不少于7500本技术和创意相关的书籍和视频供你参考和搜索。
通过订阅,你可以在线阅读任何页面或视频,甚至可以从手机或移动设备上在线阅读。
你可以在书籍出版前访问到它们,并给作者发送反馈。其他功能还包括:复制和赋值代码、组织收藏夹、下载和标记章节、做笔记、打印等。
O’Reilly Media已经将本书英文版上传到Safari在线图书服务。在http://my.safaribook sonline.com上免费注册,你就可以访问本书所有章节以及类似主题的书籍。
联系方式
如果你想就本书发表评论或有任何疑问,敬请联系出版社:
美国:
O’Reilly Media, Inc.
1005 Gravenstein Highway North
Sebastopol, CA 95472
中国:
北京市西城区西直门南大街2号成铭大厦C座807室(100035)
奥莱利技术咨询(北京)有限公司
我们还为本书建立了一个网页,其中包含了勘误表、示例和其他额外的信息。你可以通过如下网址访问该网页:
http://www.oreilly.com/catalog/9781449393632
关于本书的技术性问题或建议,请发邮件到:
bookquestions@oreilly.com
欢迎登录我们的网站(http://www.oreilly.com),查看更多我们的书籍、课程、会议和最新动态等信息。
Facebook: http://facebook.com/oreilly
Twitter: http://twitter.com/oreillymedia
YouTube: http://www.youtube.com/oreillymedia
致谢
以作者一己之力出版一本书几乎是一件不可能的事情,在此我想特别感谢为本书做出贡献的人们。
感谢Simon St.Laurent为本书付出的热心、鼓励和帮助。
感谢所有的评审专家,特别是Shelley Powers为本书提供了大量的真知灼见。
感谢我的文字编辑Rachel Monaghan, 以及其他为本书完成提供帮助的伙伴。
感谢无私的开发者社区,自由地分享他们的工作和知识,来帮助推动Web的发展。
感谢我的妻子Rebecca和女儿Sofa,能够容忍我随时随地带着笔记本准备写作。