本书使用微软*新的TypeScript语言，以面向接口及泛型的编程方式，采用HTML5中的Canvas2D绘图API，实现了一个2D动画精灵系统，并在该精灵系统上演示了精心设计的与图形数学变换相关的Demo。通过阅读本书，读者可以系统地掌握TypeScript语言、面向接口和泛型的编程方式、Canvas2DAPI绘图、图形数学、数据结构及重要的设计模式。本书共10章，分为4篇。第1篇TypeScript篇，主要介绍了如何构建TypeScript开发、编译和调试环境，以及如何使用TypeScript实现Doom3词法解析器；第2篇Canvas2D篇，主要介绍了动画与Application类，以及如何使用Canvas2D绘图；第3篇图形数学篇，主要介绍了坐标系变换、向量数学及基本形体的点选、矩阵数学及贝塞尔曲线；第4篇架构与实现篇，主要介绍了精灵系统、优美典雅的树结构及场景图系统。本书特别适合对图形、游戏和UI开发感兴趣的读者阅读，也适合需要系统学习图形开发的人员阅读。另外，本书还适合JavaScript程序员及想从C/C++、Java、C#等转HTML5开发的程序员阅读。

TypeScript是由微软公司开发的一种开源编程语言，主要为大型应用而设计。它是JavaScript的一个超集，扩展了JavaScript的语法，任何现有的JavaScript程序都可以不加改变地在TypeScript下工作。
　　本书使用最新的TypeScript语言，以面向接口及泛型的编程方式，采用HTML 5中的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、贝塞尔曲线迭代器、树结构深度优先和广度优先的8个线性遍历迭代器）；
* 使用模板方法设计模式（Application类通过模板方法模式规定了整个入口类的运行流程）；
* 使用适配器模式（在树结构中为了统一线性遍历算法，将队列和栈数据结构适配成一致的操作接口）；
* 使用享元设计模式（实现的精灵系统使用享元模式，多个精灵可以共享同一个形体，但是可以有不同的渲染状态、大小、位置和方向等）。
　　6．详尽地描述了树的数据结构要点
　　本书专门用一章来介绍树的数据结构，并且详尽地描述了树结构的各种重要算法。
* 基于队列的广度优先方式的4种非递归遍历算法（先根、后根、从左到右、从右到左）；
* 基于栈的深度优先方式的4种非递归遍历算法；
* 基于“父亲+儿子”数组方式的深度优先的4种递归遍历算法；
* 基于“父亲+儿子兄弟”方式的深度优先的4种递归遍历算法；
* 基于“父亲+儿子兄弟”方式的深度优先的非递归遍历算法；
* 基于JSON的序列化和反序列化算法。
　　7．提供完善的技术支持和售后服务
　　本书提供了专门的售后服务邮箱hzbook2017@163.com。读者在阅读本书的过程中若有疑问，可以通过该邮箱获得帮助。
本书内容及知识体系
　　第1篇 TypeScript篇（第1、2章）
　　第1章构建TypeScript开发、编译和调试环境，主要介绍了TypeScript语言的开发、编译和调试环境的搭建，最终形成一个支持源码自动编译、模块自动载入、服务器端热部署及具有强大断点调试功能的TypeScript快捷开发环境。
　　第2章使用TypeScript实现词法解析器，用TypeScript语言，以面向接口的方式实现了一个Doom3（原id Software公司毁灭战士3游戏引擎）词法解析器；并在此基础上实现了工厂和迭代器两种设计模式，使其支持接口的生成及使用迭代方式进行Token解析输出；同时封装了XMLHttpRequest类，用来支持从服务器端下载要解析的文件。本章还系统地介绍了后续章节中要用到的一些TypeScript常用的语法知识。
　　第2篇 Canvas2D篇（第3、4章）
　　第3章动画与Application类，详细介绍了requestAnimationFrame方法与屏幕刷新频率之间的关系；并在此基础上封装了一个支持基于时间的刷新、重绘，以及事件的分发和处理的Application类；还实现了能正确处理CSS盒模型的坐标变换功能；最后添加了支持不同帧率运行的计时器，模拟了setTimeout和setInterval方法的实现。
　　第4章使用Canvas2D绘图，主要介绍了Canvas2D中矢量图形、文本、图像及阴影绘制的相关内容，实现了一个本章及后续章节都要使用的基于Canvas2D的演示和测试环境。本章需要读者重点关注渲染状态堆栈的实现原理，以及各种文本对齐方式的算法和支持Repeat模式的drawImage实现等内容。
　　第3篇 图形数学篇（第5～7章）
　　第5章Canvas2D坐标系变换是本书的精华，通过多个例子演示了Canvas2D中局部坐标系变换的相关知识点，让读者知道变换顺序的重要性，理解变换及掌握原点变换的几种方式；并且通过太阳自转和月亮自公转的例子，介绍了Canvas2D中矩阵堆栈层次变换的用法；最后通过一个坦克跟随鼠标指针朝向正确地运动Demo，深入讲解了一些常用三角函数的应用。
　　第6章向量数学及基本形体的点选，首先讲述了向量的一些基本操作，然后通过向量的加法和缩放操作替换第5章坦克Demo中使用的sin/cos函数。为了演示向量的一些基本操作，特意实现了点投影到向量的动画效果Demo；给出了点与线段、圆、矩形、椭圆、三角形及凸多边形等基本形体之间的碰撞检测算法；最后给出了本章所有几何图示的生成源代码，便于读者更加深入地理解向量各个操作背后的几何含义。
　　第7章矩阵数学及贝塞尔曲线，首先讲述了矩阵的相关知识，重点推导了旋转矩阵；然后将第5章中的坦克Demo用矩阵方式重写，演示如何通过两个单位向量构建旋转矩阵，从而消除对atan2函数的使用；接着模拟了Canvas2D中的矩阵堆栈，并用自己实现的矩阵堆栈重写坦克Demo；最后介绍了贝塞尔曲线多项式的推导过程，并实现了一个曲线动画的Demo。
　　第4篇 架构与实现篇（第8～10章）
　　第8章精灵系统，以面向接口编程的方式实现了一个精灵系统，并在该系统上实现了一个Demo，用来测试系统的点与各个基本形体之间的精确碰撞检测。该系统具有必要的功能（更新、绘制、鼠标和键盘事件的分发与响应），使用了非场景图类型，支持精确点选，基于保留模式，并采用了享元设计模式。
　　第9章优美典雅的树结构，主要介绍了树结构的增、删、改、查，以及各种遍历算法，最后实现了树结构的JSON序列化和反序列化算法。本章重在灵活应用TypeScript泛型编程，涉及不少泛型编程的细节。
　　第10章场景图系统，融合前面章节所讲知识，以面向接口的编程方式实现了一个精灵系统。该系统具有必要的功能（更新、重绘、裁剪及事件分发和响应），使用了场景图类型（建立在第9章的树结构上），支持精确点选，基于非立即渲染模式（保留模式），采用了享元设计模式，兼容运行第8章的非场景图类型。在此基础上，通过骨骼层次精灵动画，演示了场景图的层次变换功能及享元模式的优点；最后实现了坦克沿着贝塞尔路径朝向正确运行的Demo，以演示该精灵系统的综合特点。
本书配套资源获取方式
　　本书涉及的源代码文件和Demo需要读者自行下载。请登录华章公司网站www.hzbook.com，在该网站上搜索到本书，然后单击“资料下载”按钮即可在页面上找到“配书资源”下载链接。
　　运行书中的源代码需要进行以下操作：
　　（1）按照本书第1章中的介绍下载并安装Node.js和VS Code。
　　（2）在VS Code的终端对话框中输入npm install命令，自动下载运行依赖包。
　　（3）下载好依赖包后继续输入npm run dev即可自动运行Demo。
本书读者对象
* 对图形、游戏和UI开发感兴趣的技术人员；
* 想转行到图形开发领域的技术人员；
* 需要全面学习图形开发技术的人员；
* 想从C/C++、Java、C#、Objective-C等语言转HTML 5开发的技术人员；
* JavaScript程序员；
* 想学习TypeScript的程序员；
* 想提高编程水平的人员；
* 在校大学生及喜欢计算机编程的自学者；
* 专业培训机构的学员。
本书阅读建议
* 没有图形框架开发基础的读者，建议从第1章顺次阅读并演练每一个实例。
* 有一定图形开发基础的读者，可以根据实际情况有重点地选择阅读各个模块和项目案例。对于每一个模块和项目案例，先思考一下实现思路，然后阅读，效果更佳。
* 可以先阅读书中的模块和Demo，再结合配套源代码理解并调试，这样更加容易理解，而且也会理解得更加深刻。
本书作者
　　本书由步磊峰编写。感谢在本书编写和出版过程中给予了笔者大量帮助的各位编辑！
　　由于笔者水平所限，加之写作时间较为仓促，书中可能还存在一些疏漏和不足之处，敬请各位读者批评指正。
　　
步磊峰

目录
前言
第1篇 TypeScript篇
第1章 构建TypeScript开发、编译和调试环境2
1.1 TypeScript简介2
1.2 安装TypeScript开发环境3
1.2.1 安装Node.js3
1.2.2 安装VS Code4
1.2.3 NPM全局安装TypeScript6
1.2.4 第一个TypeScript程序7
1.3 使用TypeScript编译（转译）器13
1.3.1 生成tsconfig.json文件13
1.3.2 解决生成tsconfig.json文件后带来的常见问题13
1.3.3 自动编译TypeScript文件15
1.4 模块化开发TypeScript15
1.4.1 tsconfig.json文件中的target和module命令选项16
1.4.2 编写Canvas2D类导出给main.ts调用16
1.4.3 使用lite-server搭建本地服务器17
1.5 使用SystemJS自动编译加载TypeScript18
1.5.1 NPM本地安装TypeScript库和SystemJS库18
1.5.2 SystemJS直接编译TypeScript源码19
1.6 使用VS Code调试TypeScript源码20
1.6.1 安装及配置Debugger for Chrome扩展20
1.6.2 VS Code中单步调试TypeScript20
1.7 本章总结22
第2章 使用TypeScript实现 Doom 3词法解析器24
2.1 Token与Tokenizer24
2.1.1 Doom3文本文件格式26
2.1.2 使用IDoom3Token与IDoom3Tokenizer接口26
2.1.3 ES 6中的模板字符串28
2.1.4 IDoom3Token与IDoom3Tokenizer接口的定义29
2.2 IDoom3Token与IDoom3Tokenizer接口的实现30
2.2.1 Doom3Token类成员变量的声明30
2.2.2 Doom3Token类变量初始化的问题31
2.2.3 IDoom3Token接口方法的实现32
2.2.4 Doom3Token类的非接口方法实现33
2.2.5 Doom3Tokenzier处理数字和空白符34
2.2.6 IDoom3Tokenizer接口方法实现34
2.2.7 Doom3Tokenizer字符处理私有方法35
2.2.8 核心的getNextToken方法36
2.2.9 跳过不需处理的空白符和注释37
2.2.10 实现_getNumber方法解析数字类型38
2.2.11 实现_getSubstring方法解析子字符串40
2.2.12 实现_getString方法解析字符串41
2.2.13 IDoom3Tokenizer词法解析器状态总结42
2.3 使用工厂模式和迭代器模式43
2.3.1 微软COM中创建接口的方式43
2.3.2 Doom3Factory工厂类43
2.3.3 迭代器模式44
2.3.4 模拟微软.NetFramework中的泛型迭代器44
2.3.5 IDoom3Tokenizer扩展 IEnumerator接口45
2.3.6 修改Doom3Tokenizer源码45
2.3.7 使用VS Code中的重命名重构方法46
2.3.8 使用迭代器解析Token46
2.3.9 面向接口与面向对象编程的个人感悟47
2.4 从服务器获取资源47
2.4.1 HTML加载本地资源遇到的问题48
2.4.2 从服务器加载资源48
2.4.3 使用XHR向服务器请求资源文件49
2.4.4 TypeScript中的类型别名50
2.4.5 使用doGet请求文本文件并解析51
2.4.6 解决仍有空白字符输出问题52
2.4.7 实现doGetAsync异步请求方法52
2.4.8 声明TypeScript中的回调函数54
2.4.9 调用回调函数55
2.5 本章总结57
第2篇 Canvas2D篇
第3章 动画与Application类60
3.1 requestAnimationFrame方法与动画60
3.1.1 HTML中不间断的循环60
3.1.2 requestAnimationFrame与监视器刷新频率62
3.1.3 基于时间的更新与重绘65
3.2 Application类及其子类67
3.2.1 Application类体系结构67
3.2.2 启动动画循环和停止动画循环68
3.2.3 Application类中的更新和重绘69
3.2.4 回调函数的this指向问题70
3.2.5 函数调用时this指向的Demo演示71
3.2.6 CanvasInputEvent及其子类73
3.2.7 使用getBoundingRect方法变换坐标系75
3.2.8 将DOM Event事件转换为CanvasInputEvent事件77
3.2.9 EventListenerObject与事件分发77
3.2.10 让事件起作用79
3.2.11 Canvas2DApplication子类和WebGLApplication子类79
3.3 测试及修正Application类80
3.3.1 继承并覆写Application基类的虚方法80
3.3.2 测试ApplicationTest类81
3.3.3 多态（虚函数动态绑定）82
3.3.4 鼠标单击事件测试83
3.3.5 CSS盒模型对_viewportToCanvasCoordinate的影响84
3.3.6 正确的_viewportToCanvasCoordinate方法实现86
3.4 为Application类增加计时器功能90
3.4.1 Timer类与TimeCallback回调函数90
3.4.2 添加和删除Timer（计时器）91
3.4.3 触发多个定时任务的操作93
3.4.4 测试Timer功能95
3.5 本章总结96
第4章 使用Canvas2D绘图98
4.1 绘制基本几何体98
4.1.1 Canvas2DApplication的绘制流程98
4.1.2 绘制矩形Demo99
4.1.3 模拟Canvas2D中渲染状态堆栈100
4.1.4 线段属性与描边操作（stroke）103
4.1.5 虚线绘制（交替绘制线段）105
4.1.6 使用颜色描边和填充108
4.1.7 使用渐变对象描边和填充110
4.1.8 使用图案对象描边和填充113
4.1.9 后续要用到的一些常用绘制方法115
4.2 绘制文本117
4.2.1 封装fillText方法117
4.2.2 文本的对齐方式119
4.2.3 自行实现文本对齐效果121
4.2.4 计算文本高度算法122
4.2.5 嵌套矩形定位算法122
4.2.6 fillRectWithTitle方法的实现125
4.2.7 自行文本对齐实现Demo126
4.2.8 font属性128
4.2.9 实现makeFontString辅助方法129
4.3 绘制图像130