- JavaScript高效圖形編程
- (美)Raffaele Cecco
- 2665字
- 2021-04-09 20:45:09
前言
作為資深的視頻游戲開發人員，我已經習慣于和高性能的編程語言和硬件打交道，因此剛開始我并沒有對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，能夠容忍我隨時隨地帶著筆記本準備寫作。
- Learning Neo4j
- jQuery Mobile Web Development Essentials（Third Edition）
- Mastering Entity Framework Core 2.0
- Python快樂編程：人工智能深度學習基礎
- Redis Applied Design Patterns
- FreeSWITCH 1.6 Cookbook
- oreilly精品圖書：軟件開發者路線圖叢書（共8冊）
- Magento 2 Development Cookbook
- Python從入門到精通
- Hands-On GUI Programming with C++ and Qt5
- Java 9 Programming By Example
- 現代CPU性能分析與優化
- 快樂編程：青少年思維訓練
- Java程序性能優化實戰
- Web前端開發精品課：HTML5 Canvas開發詳解