一、書寫本書的目的
本書的目的是使用微軟最新的TypeScript語言，以面向接口及泛型的編程方式，采用HTML5中的Canvas2D繪圖API，實現了一個具備最小運行環境（更新、重繪、裁剪以及事件分發和響應）的，支持精確點選（點與點、線段、矩形、圓形、橢圓、三角形以及凸多邊形）的，采取享元設計模式的，基于場景圖管理的并且兼容非場景圖類型的，易于擴展的2D動畫精靈系統，并在該精靈系統上演示精心設計的，和圖形數學變換相關的Demo。
二、本書有何特色
1. 全程使用TypeScript面向接口編程
本書通過TypeScript語言提供的面向接口編程的能力，實現了：
- Doom3引擎中文本格式的詞法解析器接口；
- 接口一致的，使用樹結構管理（場景圖）和線性結構管理（非場景圖）的精靈系統，并且能夠讓場景圖類型精靈系統兼容運行非場景圖類型的精靈系統；
2. 披露Canvas2D底層原理
本書在講述Canvas2D相關內容的章節中，實現了如下幾個重要的例子：
- 模擬了Canvas2D中的渲染狀態堆棧和矩陣變換堆棧，并且在實際例子中使用我們自己的矩陣變換堆棧來運行相關例子;
- 自行實現了類似Canvas2D文本繪制時的各種對齊方式的算法；
- 實現加強版的drawImage方法，使其支持repeat/repeat-x/repeat-y填充模式算法（類似Canvsas2D中圖案填充），并且使用該加強版drawImage實現九宮格縮放算法（Scale9Grid）。
3. 詳解圖形數學及點與基本幾何形體的碰檢算法
圖形編程的最大攔路虎是涉及圖形數學變換內容，本書設計的大部分例子都是以圖形數學變換為核心，主要例子如下所示：
- 將平移、縮放、旋轉的不同順序組合繪制出來；
- 通過繪制各種軌跡來觀察和理解物體原點變換的奧秘所在；
- 貝塞爾曲線原理動畫；
- 坦克方向正確的朝著鼠標移動（三角函數版）；
- 坦克方向正確的朝著鼠標移動（使用向量縮放來避免使用sin / cos三角函數）；
- 坦克方向正確的朝著鼠標移動（使用從兩個方向向量構建旋轉矩陣來避免使用三角函數atan2，并且使用自己實現的矩陣堆棧來替換Canvas2D中的矩陣堆棧）；
- 坦克沿著多條貝塞爾曲線圍成的封閉路徑朝向正確的運動；
- 點投影到向量上的動畫效果（涉及到向量的所有操作）；
- 使用鼠標精確點選旋轉中的精靈（測試點與線段、矩形、圓形、橢圓、三角形以及凸多邊形碰檢算法及凸多邊形判斷算法）；
- 太陽系模擬動畫；
- 骨骼層次精靈動畫；
4. 提供幾何原理圖示的生成源碼
本書圖形數學相關部分的幾何原理圖都是使用Canvas2D直接繪制出來，并在相關章節后面提供所有這些幾何原理圖示的繪制源碼，包括：
- 向量方向與大小概念圖示；
- 向量的加減法圖示；
- 負向量圖示；
- 向量與標量乘法圖示；
- 向量點乘圖示；
- 點與三角形關系圖示；
- 凹多邊形和凸多邊形（及三角形扇形化）圖示；
- 旋轉矩陣推導圖示
5. 精準的使用設計模式
總結一下本書中主要用到了哪些設計模式，在哪里使用：
- 使用工廠模式生產各種接口（精靈系統的精靈ISprite和所有基本形體IShape都是由SpriteFactory制造生產）；
- 使用迭代器模式抽象所有具有迭代功能的類或接口（IDoom3Tokenizer、貝塞爾曲線迭代器、樹結構深度優先和廣度優先的八個線性遍歷迭代器）；
- 使用模板方法設計模式（Application類通過模板方法模式規定了整個入口類的運行流程）；
- 使用適配器模式（在樹結構中，為了統一線性遍歷算法，將隊列和棧數據結構適配成一致的操作接口）；
- 享元設計模式（本書實現的精靈系統使用享元模式，多個精靈可以共享同一個形體，但是可以有不同的渲染狀態、大小、位置和方向等）；
6 詳盡的描述樹數據結構的要點
本書專門提供一章來了解樹數據結構，并且詳盡的描述了樹的各種重要算法：
- 基于隊列的廣度優先方式四種（先根或后根，從左到右或從右到左四種組合）非遞歸遍歷算法；
- 基于棧的深度優先方式四種非遞歸遍歷算法；
- 基于父親+兒子數組方式的深度優先四種遞歸遍歷算法；
- 基于父親+兒子兄弟方式的深度優先四種遞歸遍歷算法；
- 基于父親+兒子兄弟方式的深度優先非遞歸遍歷算法；
- 基于JSON的序列化和反序列化算法；
7. 提供完善的技術支持和售后服務
本書提供了專門的技術支持郵箱：47178234@qq.com。讀者在閱讀本書過程中有任何疑問都可以通過該郵箱獲得幫助。
三、本書內容及知識體系
全書共分10章，下面是各章的內容簡要介紹。
第1章 構建TypeScript開發編譯和調試環境
在本章中，以循序漸進的方式介紹了TypeScript語言的開發、編譯和調試環境的構建過程，最終形成一個支持源碼自動編譯、模塊自動載入、服務器端熱部署、具有強大斷點調試功能的TypeScript快捷開發環境。
第2章 使用TypeScript實現Doom3詞法解析器
在本章中，使用TypeScript語言，以面向接口的方式實現了一個Doom3（原id Software公司毀滅戰士3游戲引擎）詞法解析器，并且在此基礎上實現了工廠模式和迭代器兩種設計模式，使其支持接口的生成以及使用迭代方式進行Token解析輸出，同時封裝了XMLHttpRequest類，用來支持從服務器端下載要解析的文件。本章詳細描述TypeScript中后續章節要用到的一些常用語法知識。
第3章 動畫與Application類
在本章中，詳細的了解了requestAnimationFrame方法與屏幕刷新頻率之間的關系，并且在此基礎上封裝了一個支持基于時間的刷新、重繪、事件的分發和處理的Application類，并且實現了能正確處理CSS盒模型的坐標變換功能，最后添加了支持不同幀率運行的計時器，模擬了setTimeout和setInterval方法的實現。
第4章 使用Canvas2D繪圖
在本章中，主要關注Canvas2D中矢量圖形、文本、圖像以及陰影繪制相關內容，實現了一個本章以及后續章節要使用的、基于Canvas2D的演示和測試環境?？梢灾攸c關注一下渲染狀態堆棧的實現原理、文本各種對齊方式算法、支持repeat模式的drawImage實現等相關內容。
第5章 Canvas2D坐標系變換
在本章中，通過多個例子來演示Canvas2D中局部坐標系變換相關的知識點，目的是讓讀者掌握變換順序的重要性，如何理解變換以及原點變換的幾種方式，并且通過一個太陽自轉，月亮自公轉的例子來了解Canvas2D中矩陣堆棧層次變換用法，最后通過一個坦克跟隨鼠標朝向正確的運動Demo來深入理解一些常用的三角函數的應用。本章是本書的精華章節。
第6章 向量數學及基本形體的點選
在本章中，首先講述了向量的一些基本操作，然后通過向量的加法和縮放操作，替換掉第5章坦克Demo中使用的sin / cos函數。接著為了演示向量這些基本操作，特意實現了點投影到向量的動畫效果Demo。接著在下一節中關注點與線段、圓、矩形、橢圓、三角形、凸多邊形等基本形體之間的碰撞檢測算法。在本章最后一節中，附加了本章所有幾何圖示的生成源碼，目的是讓大家更加深入的了解向量各個操作背后的幾何含義。
第7章 矩陣數學及貝塞爾曲線
在本章中，首先講述了矩陣相關的知識，重點推導了旋轉矩陣。然后將第5章中的坦克Demo用矩陣方式重寫，目的是為了演示如何從兩個單位向量構建旋轉矩陣從而消除掉atan2函數的使用。接著模擬了Canvas2D中的矩陣堆棧，并且使用自己實現的矩陣堆棧重寫坦克Demo的相關操作。最后一節主要關注貝塞爾曲線多項式的推導過程以及實現一個曲線動畫Demo。
第8章 精靈系統
在本章中，以面向接口編程方式實現一個具有必要功能的（更新、繪制、鼠標和鍵盤事件的分發與響應）、使用非場景圖類型的、支持精確點選的、基于保留模式的、采取享元設計模式的精靈系統。并在該精靈系統上實現了一個Demo，用來測試精靈系統的點與各個基本形體之間的精確碰撞檢測。
第9章 優美典雅的樹結構
在本章中，主要講解了樹結構的增刪改查，以及各種遍歷算法，最后實現樹結構的JSON序列化和反序列化算法，本章也是TypeScript泛型編程的靈活應用章節，里面涉及不少泛型編程的細節。
第10章 場景圖系統
本章是前面知識的大融合，以面向接口的編程方式實現一個具有必要功能（更新，重繪，裁剪及事件分發和響應）的、使用場景圖類型（建立在第9章樹結構上）的、支持精確點選的、基于非立即渲染模式（保留模式）的、采取享元設計模式的、兼容運行第8章的非場景圖類型的精靈系統。然后通過骨骼層次精靈動畫來演示場景圖的層次變換功能以及享元模式的優點，最后實現坦克沿著貝塞爾路徑朝向正確運行的Demo來演示該精靈系統的綜合特點。
由此可見，本書的章節安排按照知識體系結構可以劃分為四個篇章。
- 第1篇 TypeScript篇（第1～2章）；
- 第2篇 Canvas2D篇（第3～4章）；
- 第3篇 圖形數學篇（第5～7章）；
- 第4篇 架構與實現篇（第8～10章）；
四、適合閱讀本書的讀者
- 對圖形、游戲或UI開發感興趣的技術人員或想轉入圖形開發的技術人員；
- 需要全面學習圖形開發技術的人員
- 想從其他強類型語言（C/C++、Java、C#、Objc等）轉入HTML5開發的技術人員；
- JavaScript程序員；
- 想了解TypeScript的程序員；
- 希望提高編程基礎技術的人員；
- 專業培訓機構的學員；
- 在校大學生及喜歡計算機編程的自學者；
五、閱讀本書的建議
- 沒有圖形框架開發基礎的讀者，建議從第1章順次閱讀并演練每一個實例。
- 有一定圖形開發基礎的讀者，可以根據實際情況有重點地選擇閱讀各個模塊和項目案例。
- 對于每一個模塊和項目案例，先自己思考一下實現的思路，然后再閱讀，學習效果更好。
- 可以先對書中的模塊和Demo閱讀一遍，然后結合本書中提供的源碼再理解并調試一遍，這樣理解起來就更加容易，也會更加深刻。
六、本書目錄
第1章 構建TypeScript開發編譯和調試環境
1.1 TypeScript簡介
1.2 安裝TypeScript開發環境
1.2.1 安裝NodeJS
1.2.2 安裝Visual Studio Code
1.2.3 npm全局安裝TypeScript
1.2.4 第一個TypeScript程序
1.3 使用tsc編譯(轉譯)器
1.3.1 生成tsconfig.json文件
1.3.2 解決生成tsconfig.json文件后帶來的常見問題
1.3.3 自動編譯TypeScript文件
1.4 模塊化開發TypeScript
1.4.1 tsconfig.json文件中的target和module命令選項
1.4.2 編寫Canvas2D類導出給main.ts調用
1.4.3 使用lite-server搭建本地服務器
1.5 使用SystemJS自動編譯加載TypeScript
1.5.1 npm本地安裝TypeScript庫和SystemJS庫
1.5.2 SystemJS直接編譯TypeScript源碼
1.6 使用VS Code調試TypeScript源碼
1.6.1 安裝及配置Debugger for Chrome擴展
1.6.2 VS Code中單步調試TypeScript
1.7 本章總結
第2章 使用TypeScript實現Doom3詞法解析器
2.1 Token與Tokenizer
2.1.1 Doom3文本文件格式
2.1.2 使用IDoom3Token與IDoom3Tokenizer接口
2.1.3 ES6中的模板字符串
2.1.4 IDoom3Token與IDoom3Tokenizer接口的定義
2.2 IDoom3Token與IDoom3Tokenizer接口的實現
2.2.1 Doom3Token類成員變量的聲明
2.2.2 Doom3Token類變量初始化的問題
2.2.3 IDoom3Token接口方法的實現
2.2.4 Doom3Token類的非接口方法實現
2.2.5 Doom3Tokenzier處理數字和空白符
2.2.6 IDoom3Tokenizer接口方法實現
2.2.7 Doom3Tokenizer字符處理私有方法
2.2.8 核心的getNextToken方法
2.2.9 跳過不需處理的空白符和注釋
2.2.10 實現_getNumber方法解析數字類型
2.2.11 實現_getSubstring方法解析子字符串
2.2.12 實現_getString方法解析字符串
2.2.13 IDoom3Tokenizer詞法解析器狀態總結表
2.3 使用工廠模式和迭代器模式
2.3.1 微軟COM中創建接口的方式
2.3.2 Doom3Factory工廠類
2.3.3 迭代器模式已經成為語法的一部分
2.3.4 模擬微軟.NetFramework中的泛型迭代器
2.3.5 IDoom3Tokenizer擴展 IEnumerator接口
2.3.6 修改Doom3Tokenizer源碼
2.3.7 使用VS Code中的重命名重構方法
2.3.8 使用迭代器來解析Token
2.3.9 面向接口面向對象編程的個人感悟
2.4 從服務器獲取資源
2.4.1 加載本地HTML資源遇到的問題
2.4.2 從服務器加載資源
2.4.3 使用XHR向服務器請求資源文件
2.4.4 TypeScript中的類型別名
2.4.5 使用doGet請求文本文件并解析
2.4.6 解決仍有空白字符輸出問題
2.4.7 實現doGetAsync異步請求方法
2.4.8 聲明TypeScript中的回調函數
2.4.9 調用回調函數
2.5 本章總結
第3章 動畫與Application類
3.1 requestAnimationFrame方法與動畫
3.1.1 HTML中不間斷的循環
3.1.2 requestAnimationFrame與監視器刷新頻率
3.1.3 基于時間的更新與重繪
3.2 Application類及其子類
3.2.1 Application類體系結構
3.2.2 啟動動畫循環和停止動畫循環
3.2.3 Application類中的更新和重繪
3.2.4 回調函數this指向問題
3.2.5 函數調用時this指向的Demo演示
3.2.6 CanvasInputEvent及其子類
3.2.7 使用getBoundingRect ( )方法變換坐標系
3.2.8 將DOM Event事件轉換為CanvasInputEvent事件
3.2.9 EventListenerObject與事件分發
3.2.10 讓事件起作用
3.2.11 Canvas2DApplication子類和WebGLApplication子類
3.3 測試及修正Application類
3.3.1 繼承并覆寫Application基類的虛方法
3.3.2 測試ApplicationTest類
3.3.3 多態（虛函數動態綁定）
3.3.4 鼠標點擊事件測試
3.3.5 CSS盒模型對_viewportToCanvasCoordinate的影響
3.3.6 正確的_viewportToCanvasCoordinate方法實現
3.4 為Application類增加計時器功能
3.4.1 Timer類與TimeCallback回調函數
3.4.2 添加和刪除Timer（計時器）
3.4.3 觸發多個定時任務的操作
3.4.4 測試Timer功能
3.5 本章總結
第4章 使用Canvas2D繪圖
4.1 繪制基本幾何物體
4.1.1 Canvas2DApplication的繪制流程
4.1.2 繪制矩形Demo
4.1.3 模擬Canvas2D中渲染狀態堆棧
4.1.4 線段屬性與描邊操作（stroke）
4.1.5 虛線繪制（交替繪制線段）
4.1.6 使用顏色描邊和填充
4.1.7 使用漸變對象描邊和填充
4.1.8 使用圖案對象描邊和填充
4.1.9 后續要用到的一些常用繪制方法
4.2 繪制文本
4.2.1 封裝fillText方法
4.2.2 文本的對齊方式
4.2.3 自行實現文本對齊效果
4.2.4 計算文本高度算法
4.2.5 嵌套矩形定位算法
4.2.6 fillRectWithTitle方法的實現
4.2.7 自行文本對齊實現Demo
4.2.8 font屬性
4.2.9 實現makeFontString輔助方法
4.3 繪制圖像
4.3.1 drawImage方法
4.3.2 Repeat圖像填充模式
4.3.3 加強版的drawImage方法的實現
4.3.4 加強版drawImage方法效果演示
4.3.5 離屏Canvas的使用
4.3.6 操作Canvas中的圖像數據
4.4 繪制陰影
4.5 本章總結
第5章 坐標系變換
5.1 局部坐標系變換
5.1.1 準備工作
5.1.2 平移操作演示
5.1.3 平移和旋轉組合操作演示
5.1.4 繪制旋轉的軌跡
5.1.5 變換局部坐標系的原點
5.1.6 測試fillLocalRectWithTitle方法
5.1.7 徹底掌控局部坐標系變換
5.1.8 通用的原點變換方法
5.1.9 公轉（Revolution）與自轉（Rotation）
5.1.10 原點變換的另一種方法
5.2 坦克Demo
5.2.1 象限（Quadrant）文字繪制
5.2.2 坦克形體的繪制
5.2.3 坦克以及炮塔的旋轉
5.2.4 計算坦克的朝向
5.2.5 坦克朝著目標移動
5.2.6 使用鍵盤控制炮塔的旋轉
5.2.7 初始朝向的重要性
5.2.8 朝向正確的運行
5.2.9 圖5.25效果的生成代碼
5.3 本章總結
第6章 向量數學及基本形體的點選
6.1 向量數學
6.1.1 向量的概念
6.1.2 向量的大小與方向
6.1.3 向量的加減法及幾何含義
6.1.4 負向量及幾何含義
6.1.5 向量與標量乘法及幾何含義
6.1.6 向量標量相乘取代三角函數sin / cos的應用
6.1.7 向量的點乘及幾何含義
6.1.8 向量的夾角以及朝向計算
6.2 向量投影Demo
6.2.1 Demo的需求描述
6.2.2 繪制向量
6.2.3 向量投影算法
6.2.4 投影效果演示代碼
6.2.5 向量getAngle和getOrientation方法的區別
6.3 點與基本幾何形體碰撞檢測算法
6.3.1 點與線段以及圓的碰撞檢測算法
6.3.2 點與矩形以及橢圓的碰撞檢測算法
6.3.3 點與三角形的碰撞檢測算法
6.3.4 點與任意凸多邊形的碰撞檢測算法
6.4 附錄：圖示代碼
6.4.1 圖6.1向量概念圖示源碼
6.4.2 圖6.2 / 圖6.3向量加減法圖示源碼
6.4.3 圖6.4負向量圖示源碼
6.4.4 圖6.5向量標量相乘圖示源碼
6.4.5 圖6.6向量點乘圖示源碼
6.4.6 圖6.11點與三角形的關系圖示源碼
6.4.7 圖6.12 / 圖6.13 凹凸多邊形圖示源碼
6.5 本章總結
第7章 矩陣數學及貝塞爾曲線
7.1 矩陣數學
7.1.1 矩陣乘法
7.1.2 單位矩陣
7.1.3 矩陣求逆
7.1.4 用矩陣變換向量
7.1.5 平移矩陣及其逆矩陣
7.1.6 縮放矩陣及其逆矩陣
7.1.7 旋轉矩陣及其逆矩陣
7.1.8 從兩個單位向量構建旋轉矩陣
7.1.9 使用makeRotationFromVectors方法取代atan2的應用
7.1.10 仿射變換
7.1.11 模擬Canvas2D中的矩陣堆棧
7.1.12 在坦克Demo中應用矩陣堆棧
7.1.13 圖7.1旋轉矩陣推導圖示源碼
7.2 貝塞爾曲線
7.2.1 Demo效果
7.2.2 使用Canvas2D內置曲線繪制方法
7.2.3 伯恩斯坦多項式推導貝塞爾多項式
7.2.4 貝塞爾曲線自繪版
7.2.5 鼠標碰撞檢測和交互功能
7.2.6 實現貝塞爾曲線枚舉器
7.3 本章總結
第8章 精靈系統
8.1 精靈系統架構與接口
8.1.1 精靈系統概述
8.1.2 應用程序的入口與命令分發
8.1.3 IRenderState、ITransformable以及ISprite接口
8.1.4 IDrawable、IHittable以及IShape接口
8.2 實現非場景圖類型精靈系統
8.2.1 Transform2D輔助類
8.2.2 ISprite接口的實現
8.2.3 Sprite2DManager管理類
8.3 IShape形體系統
8.3.1 線段Line類
8.3.2 BaseShape2D抽象基類
8.3.3 Rect類和Grid類
8.3.4 Circle類和Ellipse類
8.3.5 ConvexPolygon類
8.3.6 Scale9Grid類
8.3.7 SpriteFactory生產IShape產品
8.4 精靈系統測試Demo
8.4.1 Demo的運行流程
8.4.2 創建各種IShape對象
8.4.3 創建網格精靈和事件處理函數
8.4.4 非網格精靈的事件處理函數
8.4.5 Demo的入口代碼
8.5 本章總結
第9章 優美典雅的樹結構
9.1 樹數據結構
9.1.1 樹結構簡介
9.1.2 樹節點添加時的要點
9.1.3 樹節點isDescendantOf和remove方法的實現
9.1.4 實現添加樹節點方法
9.1.5 樹結構的層次關系查詢操作
9.2 樹數據結構的遍歷
9.2.1 樹結構遍歷順序
9.2.2 樹結構線性遍歷算法
9.2.3 樹結構遍歷枚舉器
9.2.4 樹結構枚舉器的實現
9.2.5 測試樹結構枚舉器
9.2.6 深度優先的遞歸遍歷
9.2.7 使用兒子兄弟方式遞歸遍歷算法
9.2.8 兒子兄弟方式非遞歸遍歷算法
9.3 樹數據結構的序列化與反序列化
9.3.1 樹節點自引用特性導致序列化錯誤
9.3.2 樹節點的序列化和反序列化操作
9.4 隊列與棧的實現
9.5 本章總結
第10章 場景圖系統
10.1 實現場景圖精靈系統
10.1.1 非場景圖精靈系統的不足之處
10.1.2 樹結構場景圖系統
10.1.3 矩陣堆棧和場景圖
10.1.4 實現場景圖精靈系統概述
10.1.5 核心的SpriteNode類
10.1.6 實現SpriteNode類的接口方法
10.1.7 SpriteNode類的findSprite方法實現
10.1.8 遞歸的更新與繪制操作
10.1.9 SpriteNodeManager類
10.1.10 修改Sprite2D類的getWorldMatrix方法
10.1.11 讓Sprite2DApplication類支持場景圖精靈系統
10.2 骨骼層次精靈Demo
10.2.1 實現骨骼形體
10.2.2 SkeletonPersonTest類
10.2.3 事件處理程序
10.2.4 使用renderEvent事件
10.2.5 總結
10.3 坦克沿貝塞爾路徑運動Demo
10.3.1 實現BezierPath形體類
10.3.2 需求描述
10.3.3 Demo的場景圖
10.3.4 TankFollowBezierPathDemo類初始化
10.3.5 創建錨點、控制點及連線精靈
10.3.6 創建二次貝塞爾路徑及坦克精靈
10.3.7 鍵盤事件處理方法
10.3.8 鼠標事件處理方法
10.3.9 坦克沿路徑運動的核心算法
10.3.10 讓坦克動起來
10.4 讓精靈系統支持裁剪操作
10.5 本章總結
七、Q&A
Q1：為什么選擇TypeScript語言及Canvas2D圖形渲染API?
A1：選擇TypeScript是因為：強類型有利于團隊合作；支持面向對象、面向接口及泛型編程；可以根據預先設定轉譯輸出為JavaScript各個標準(ES3、ES5等)。而選擇Canvas2D是因為跨平臺，運行方便，使用廣泛，簡單易學，最關鍵的是我們使用了TypeScript語言。
Q2：編譯和轉譯的區別是什么?
A2：編譯(Compile)通常產生可直接運行的二進制代碼（例如C/C++等）或字節碼（例如C# 、Java等）。而轉譯(Transpile)通常將一種源碼轉換為另外一種源碼，產生的源碼仍舊需要被編譯或解釋執行。TypeScript就是轉譯為JavaScript。
Q3：目前市面上有哪些主流的JavaScript引擎?
A3：JavaScript引擎是一個專門處理JavaScript腳本的解釋器。目前有四大主流的、開源跨平臺的、基于C++ 實現的JavaScript引擎，既Google的V8、Mozilla的SpideMonkey、WebKit的JavaScriptCore以及微軟的ChakraCore引擎。
Q4：目前市面上有哪些主流的圖形API?
A4：2D圖形常用的API包括：Windows中的GDI/GDI+、Linux中的Cairo/Qt、macOS/iOS中的Quartz 2D、Android中的Skia以及HTML5中的Canvas2D。3D圖形常用的API包括：MS DirectX、OpenGL(ES)、WebGL、Vulkan以及macOS/iOS中的Metal。
Q5：圖像和圖形的區別是什么?
A5：可以將圖像(Image)看成一個二維像素(Pixel)數組，而像素是具有位置和色彩值的小方格。圖形(Graph)則是由基本圖元(Primitive)組成的，圖元的全稱為圖形輸出原語(Graphics Output Primitive)，是軟件包中用來描述各種圖形元素(例如點，線，面，曲線，路徑等)的函數。
Q6：本書所講的內容只適合TypeScript及Canvas2D嗎?
A6：本書所講的大部分內容實際是圖形相關的背景知識，和編程語言以及圖形API無關。你可以很容易的將本書的知識用到其他編程語言或圖形API上。編程是思想和背景知識的完美融合，而編程語言和API則是工具。
八、編者簡介
- 計算機圖形編程的資深愛好者，具有15年的編程經驗，擅長C/C++、C#、Java、Objc及TypeScript/JavaScript等C語系編程語言。
- 在作者的程序人生中，曾經寫過3D程序、UI引擎、Java頁游服務器和微信服務器,并為國內的多個大型國營金融機構開發過多款移動端APP。
-
個人感覺最大的成就是通過內部培訓的方式，為公司培養了超過20個以上的C/C++以及移動端開發人才。
編者
九、下一步目標
·
在TypeScript圖形渲染實戰(2D架構設計和實現)一書中，實現了IDoom3Tokenizer詞法解析器，WebGLApplocation類以及部分的2D骨骼蒙皮動畫技術，在接下來的一本書將擴展一下這些技術，來演示3D圖形相關的知識。
下本書，將會繼續使用安德斯海爾斯伯格的TypeScript語言來演示3D引擎之神約翰卡馬克的相關技術。
每日科技英文16: 我的精神導師約翰卡馬克
每日科技英文17: 我的偶像安德斯·海爾斯伯格
