前端canvas项目实战——在线图文编辑器：序

前言

很高兴，今天我又为自己设定了一个目标：带领大家从入门HTML5中的Canvas，到最终实现一个精美的在线图文编辑器。我的初心没有变，就像几年以前，我在自己苦苦摸索实现之后，写下一篇篇博文，想要让初学者们在学习 Java Web 的道路上少走一些弯路一样。

一、博主是谁？

博主本/硕皆毕业于211工程大学软件工程专业，上学期间就已经开始实现实用的工具，来提升实验室的工作效率。博主毕业后入职了国内顶尖的互联网大厂，成为一名软件开发工程师。工作至今4年多，拥有丰富的全栈开发和交付能力。

另外，博主有一项个人特质值得一提：我有很强的代码洁癖，实现需求的同时会特别关注代码的 整洁性、内存复杂度 和 时间复杂度，期望自己的代码是简洁且高效的。

二、关于本专栏

很长时间以来，关于HTML5的信息不绝于耳，Canvas就是其中的一大特色。在这个专栏，我会撰写一系列的博文，带领大家从入门到最终实现一个精美的在线图文编辑器。在这个过程中，相信大家一定会受益良多。

1. 本专栏涉及的技术栈

前端

框架选择我惯用的「React」;
画布的底层依赖于「fabric.js」;
当画布的基本功能趋于稳定时，我们会引入「TypeScript」，用弱类型让规范化；
涉及到向后台服务器发送Ajax请求时，我将引入「Axios」；
实现到协同编辑的功能时，我还会引入「Socket」长连接…

后端

语言选择我惯用的「Java」，框架会使用「Spring Boot」。上传图片、导出可二次编辑的PDF、长连接等章节，代码的重心就会落在后端。

2. 专栏适合谁来学习？

1) 软件工程 / 计算机相关专业的同学:
- 如果你需要一份代码精良、注释齐全、界面优美的毕业设计；
- 如果你的简历上缺少一份有价值、高品质的实战项目；
- ···
这个专栏不仅「授人以鱼」，还「授人以渔」，就是为你量身打造的！
2) 缺少HTML5 Canvas实践的前端开发者:

如果你正在寻找一套内容连贯、代码简洁、有些挑战性的项目来入门和掌握canvas的实践方法，这个专栏就是你要找的！
3) 想要做点什么，但苦于没有想法的小团队:

如果有两个成员以上，就可以分工明确：一个前端、一个后端，合作起来一起完成这个实战项目。这样，团队里的每个人就不需要消耗精力去学习不感兴趣的部分。

总之，欢迎任何对这个项目产生兴趣的人！有人陪伴的学习之旅，必定胜于独自走在路上，苦苦追寻！

3. 你可以从专栏学到什么？

企业级开发的实现逻辑:
- 每个小节在动手实现之前，我都会先进行严谨的需求分析，将大的需求化整为零，确保每个子模块简洁可维护、子模块间可以高效协作。
- 部分小节，我列举出了自己在实现过程中引入的bug，深入浅出地讲解产生bug的原因，以及如何修复它。——这些都是学习过程中可以让人快速成长的精华部分！
企业级开发的项目代码:

每一篇博文中，都会对本节的核心代码进行重点讲解。在博文的末尾，会附上本节实现的完整项目代码，代码托管于「CodeSandbox」网站，点击链接前往，可以立即预览到完整代码的效果，也可以一键下载项目压缩包。
HTML5 Canvas的扩展能力:
- 在线图文编辑器: 随着我们功能的完善，可以上线这个网站提供服务。
- 知识产权保护: 如某度文档，只可浏览文档内容，不可以框选复制粘贴。
- 2D网页游戏 / 微信小游戏: canvas的用途十分广泛，可以用来制作网页游戏和微信小游戏。

4. 系列文章索引

01. 《前端canvas项目实战——在线图文编辑器：左侧工具栏》
02. 《前端canvas项目实战——在线图文编辑器：颜色》
03. 《前端canvas项目实战——在线图文编辑器：线条宽度&样式》
04. 《前端canvas项目实战——在线图文编辑器：线条端点样式》
05. 《前端canvas项目实战——在线图文编辑器：字体、字号、行间距》
06. 《前端canvas项目实战——在线图文编辑器：加粗、斜体、下划线、删除线（上）》
07. 《前端canvas项目实战——在线图文编辑器：加粗、斜体、下划线、删除线（下）》
08. 《前端canvas项目实战——在线图文编辑器：复制、删除、锁定、层叠顺序》
09. 《前端canvas项目实战——在线图文编辑器：逻辑画布》
10. 《前端canvas项目实战——在线图文编辑器：小地图MiniMap（上）》
11. 《前端canvas项目实战——在线图文编辑器：小地图MiniMap（下）》