Appearance
序言
Canvas 2D API 是 Web 平台上功能最强大的图形绘制技术之一，它为开发者提供了在浏览器中创建复杂图形、动画和交互体验的能力。从简单的数据可视化，到复杂的图形编辑器（如 Figma、Canva、Excalidraw），Canvas 都是核心技术支撑。
然而，掌握 Canvas 并不容易。市面上的教程往往停留在基础 API 的介绍，缺少从原理到工程实践的系统性讲解。当你想阅读 Fabric.js、Konva.js 等知名图形库的源码时，会发现自己缺乏足够的理论基础和工程经验。
这本书的目标，就是帮助你从零开始，系统性地掌握 Canvas 图形编程的完整知识体系。
本书特色
1. 从基础到进阶的完整路径
本书不仅讲解 Canvas API 的使用方法，更注重：
- 原理阐释：为什么需要这样设计？背后的数学原理是什么？
- 工程实践：如何在生产环境中应用？性能优化的关键点在哪？
- 源码解读：Fabric.js、Figma 等知名项目是如何实现的？
2. 以图形编辑器为实战目标
本书以构建一个完整的图形编辑器为主线，涵盖：
- 对象模型设计（类 Fabric.js 的架构）
- 选择、变换、分组等核心交互
- 撤销重做、剪贴板等高级功能
- 性能优化（脏矩形、分层Canvas、离屏渲染）
通过这个项目，你将建立对 Canvas 工程化的完整认知。
3. 真实案例和性能数据
本书不仅提供理论讲解，还包含：
- 真实项目案例：图形编辑器优化实战（79.5%性能提升）
- 性能基准测试：量化不同优化策略的收益
- 企业级架构：Figma、Miro、Canva 的技术方案解析
4. 为阅读源码做准备
学完本书后，你将能够：
- 轻松阅读 Fabric.js、Konva.js、Excalidraw 的源码
- 理解知名图形编辑器的架构设计
- 独立设计和实现复杂的 Canvas 应用
如何阅读本书
本书分为 9 个部分，共 59 章，建议按以下方式阅读：
初学者路径（0基础入门）
第一部分：Canvas 基础入门（第1-7章）
- 了解 Canvas 的坐标系统、绘制上下文、状态管理
- 掌握像素操作和基本图像处理
第二部分：图形绘制详解（第8-14章）
- 学习基础图形、路径系统、文本和图像绘制
第三部分：样式与视觉效果（第15-18章）
- 掌握填充描边、渐变图案、阴影和合成
进阶开发者路径（有Canvas基础）
第四部分：坐标变换与矩阵（第19-23章）
- 深入理解变换矩阵的数学原理
- 掌握复杂变换的实现方法
第五部分：事件与交互（第24-28章）
- 实现拖拽、缩放、旋转等交互
- 学习点击检测和键盘事件处理
第六部分：动画与渲染优化（第29-39章）
- 掌握动画原理和性能优化技巧
- 学习脏矩形、分层Canvas、离屏渲染
工程化实战路径（构建图形编辑器）
第七部分：对象模型设计（第40-44章）
- 学习类 Fabric.js 的对象模型架构
- 掌握属性系统、序列化等高级功能
第八部分：图形编辑器核心功能（第45-53章）
- 实现选择、变换、分组等核心交互
- 构建撤销重做、剪贴板等高级功能
第九部分：高级主题（第54-59章）
- 高DPI适配、性能分析、WebWorker多线程
- Canvas vs SVG 选择、导出功能实现
配套资源
- 完整代码示例：书中所有代码均可运行
- 图形编辑器项目：逐步构建的完整项目
- 性能测试工具：用于验证优化效果的基准测试
适合人群
- 前端开发者：想系统学习 Canvas 图形编程
- 游戏开发者：需要在 Web 上实现2D图形和动画
- 可视化工程师：构建复杂的数据可视化应用
- 工具开发者：想开发图形编辑器、白板等工具
- 源码阅读者：准备阅读 Fabric.js 等图形库源码
致谢
感谢 Fabric.js、Konva.js、Excalidraw、tldraw 等优秀开源项目的作者，本书的许多设计思想和最佳实践都来源于对这些项目的学习和研究。
感谢 Figma、Miro、Canva 等企业级产品的工程团队，你们的技术分享为本书提供了宝贵的实战经验。
开始学习
现在，让我们从 Canvas 的基础知识开始，一步步走向专业的图形编程之路。
让我们开始吧！