步磊峰  现为上海斐繁信息科技有限公司技术负责人。计算机图形编程资深爱好者。有超过15年的编程经验。擅长C、C++、C#、Java、Objc、JavaScript、TypeScript等编程语言。在作者的程序人生中，曾经写过3D程序、跨平台UI引擎、Java页游服务器和微信服务器，并为国内的多个大型国营金融机构开发过多款移动端App。个人Z大的成就是通过内部培训，为公司培养了20多个C语言、C++及移动端的开发人才。

本书使用微软新的TypeScript语言，以面向接口及泛型的编程方式，采用HTML 5中的Canvas2D绘图API，实现了一个2D动画精灵系统，并在该精灵系统上演示了精心设计的与图形数学变换相关的Demo。通过阅读本书，读者可以系统地掌握TypeScript语言、面向接口和泛型的编程方式、Canvas2D API绘图、图形数学（向量、点与基本形体的碰撞检测、矩阵及贝塞尔曲线）、数据结构（队列、栈、树）及重要的设计模式。

本书共10章，分为4篇。第1篇TypeScript篇，主要介绍了如何构建TypeScript开发、编译和调试环境，以及如何使用TypeScript实现Doom 3词法解析器；第2篇Canvas2D篇，主要介绍了动画与Application类，以及如何使用Canvas2D绘图；第3篇图形数学篇，主要介绍了坐标系变换、向量数学及基本形体的点选、矩阵数学及贝塞尔曲线；第4篇架构与实现篇，主要介绍了精灵系统、优美典雅的树结构及场景图系统。

本书内容丰富，讲解由浅入深，特别适合对图形、游戏和UI开发感兴趣的读者阅读，也适合需要系统学习图形开发技术的人员阅读。另外，本书还适合JavaScript程序员及想从C/C++、Java、C#等语言转HTML 5开发的程序员阅读。编程爱好者、高校学生及培训机构的学员也可以将本书作为兴趣读物。

本书从图形基础算法原理出发，用非常浅显的语言讲解相关知识点，然后深入浅出地分析经典案例，一步步带你领略图形算法及架构的精彩世界。

——中国工业设计研究院西南中心院长  覃霁

作者通过通俗易懂的讲解，将他十几年图形编程经验的精华浓缩至本书中。书中对TypeScript编程语言、2D图形及其数学基础都有较为全面的剖析，能够让广大读者较为系统地掌握HTML 5图形开发的核心技术。

——上海灵禅网络科技股份有限公司CEO  兰海文

本书涉猎广泛，内容深刻，讲解深入浅出，囊括了TypeScript基本语法、图形渲染机制、图形学、数据结构、设计模式等内容，是一本不可多得的HTML 5图形开发书籍。

——上海凯英网络科技有限公司副总裁  何鑫

本书带给读者全面的TypeScript语言讲解及Canvas2D绘图API开发案例，从而帮助读者构建出计算机图形学中数学变换的知识体系。对于热衷于图形学或游戏开发的相关读者而言，本书不仅是一本通俗易懂的TypeScript入门书，更是一本优秀的图形学工具书。

——成都手领科技有限公司创始人兼CTO、迷雾侦探/AI-LIMIT游戏技术负责人  张锐

一本优秀的计算机图书，能够让读者从其文字中感受到作者的态度。相信读者也能够从本书中体会到作者多年来所坚持的技术钻研精神。

——《全局光照技术》作者  秦春林

传统图形编程都是基于DirectX/OpenGL。而Web时代，HTML 5+Canvas2D/WebGL+TypeScript的组合才是Z佳的图形编程方案。作者以多年的实战经验编写了本书，让读者能够较为轻松地理解图形编程的奥秘和编写技巧。阅读本书后，不但能让老的图形程序员容光焕发，精神饱满，收获满满，而且也能让萌新程序员通过本书一览大佬庖丁解牛的风姿，从而获得巨大的提升。

——《Go语言从入门到进阶实战》作者、慕课网讲师、资深全栈游戏开发者  徐波

（限于篇幅要求，从第3章开始只给出了二级目录，完整的三级目录请阅读图书）

第1篇  TypeScript篇

第1章  构建TypeScript开发、编译和调试环境     2

1.1  TypeScript简介    2

1.2  安装TypeScript开发环境   3

1.2.1  安装Node.js      3

1.2.2  安装VS Code    4

1.2.3  NPM全局安装TypeScript       6

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  模块化开发TypeScript 15

1.4.1  tsconfig.json文件中的target和module命令选项  16

1.4.2  编写Canvas2D类导出给main.ts调用    16

1.4.3  使用lite-server搭建本地服务器     17

1.5  使用SystemJS自动编译加载TypeScript   18

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中单步调试TypeScript     20

1.7  本章总结      22

第2章  使用TypeScript实现 Doom 3词法解析器 24

2.1  Token与Tokenizer       24

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  使用迭代器解析Token     46

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.2  Application类及其子类      67

3.3  测试及修正Application类  80

3.4  为Application类增加计时器功能      90

3.5  本章总结      96

第4章  使用Canvas2D绘图      98

4.1  绘制基本几何体   98

4.2  绘制文本      117

4.3  绘制图像      130

4.4  绘制阴影      141

4.5  本章总结      142

第3篇  图形数学篇

第5章  Canvas2D坐标系变换   146

5.1  局部坐标系变换   146

5.2  坦克Demo    173

5.3  本章总结      190

第6章  向量数学及基本形体的点选 192

6.1  向量数学      192

6.2  向量投影Demo    203

6.3  点与基本几何形体的碰撞检测算法   211

6.4  附录：图示代码   217

6.5  本章总结      222

第7章  矩阵数学及贝塞尔曲线 223

……