---

前言

很高興，今天我又為自己設定了一個目標：帶領大家從入門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（下）》

以下博文撰寫中，敬請期待！

12. 《前端canvas項目實戰——在線圖文編輯器：畫布快捷操作》
13. 《前端canvas項目實戰——在線圖文編輯器：漸近線》
14. 《前端canvas項目實戰——在線圖文編輯器：撤銷 / 重做》
15. 《前端canvas項目實戰——在線圖文編輯器：標尺與輔助線》
16. 《前端canvas項目實戰——在線圖文編輯器：上傳圖片》
    …

---

三、 付費信息

本專欄設定價格為￥299, 訂閱之后，你可以獲得：

• 全部博文的完整閱讀權限，永不過期。
• 項目完整代碼，可以點擊每篇博文后的鏈接，在線上隨意體驗本節內容的實現效果。
• 可以向博主私信自己亟待解決的canvas代碼問題，我會在第一時間幫助你調試、定位和解決。
• 如果有急于學習的canvas相關內容，可以評論博文或者私信博主，大家關注最多的內容，我會調整順序，優先講解。

---

后記

持續地用學習到的知識進行實踐，再用實踐過程中得到的成功或失敗的經驗強化學習的成果，這是一個令人喜悅的正向循環。

每個人的學習之路上都要經過一片“沼澤”。趟過那些泥濘之后，我在來時的路上鋪上了木板，希望你經過的時候可以大步流星，一往無前。
——2024-05-19

今天一次性發布了兩篇博文，由于篇幅原因，對小地圖MiniMap的文章進行了拆分。小地圖是一個需要嚴謹對待的，慢工出細活的功能。

參考了一下：

• 在做類似事情的朋友，都沒有花心思把小地圖做出來。
• 商用的圖文編輯器，小地圖也是用DOM元素拼的，沒有我的實現方式整潔、易維護。
• fabric.js倉庫的作者，應issue中大家的強烈要求，斷斷續續做了近三年，也沒有做出來。

我就不在這里吹自己了，這兩篇博文里的代碼邏輯簡潔明了，非常值得學習。快去看看吧！
——2024-05-23