前言

嗨，大家好！其實從蠻久以前就有耳聞鐵人賽，身邊也有一些朋友參加過了，本來想說去年要參加，但是計劃趕不上變化，忙著找工作腦袋就完全忘記這件事情了。xD

也因為去年錯過了，今年有比較充裕的時間做準備。我打算把開發中的個人專案的開發過程，用鐵人賽的方式做比較詳細的紀錄，也順便宣傳一下我的個人專案 xD。

※ 後記：把自己在做的東西或想法傳遞給他人真的會讓自己思考得更全面；有很多自己開發時沒有想到的問題，在寫文章的時候一一浮現。大家或許也可以透過寫作分享的方式把自己想要更精進的東西紀錄傳遞給他人，說不定會有意想不到的收穫！

在打字的時候會不自覺的一直用 “XD” 這個表情符號 xD。

為什麼選擇無限畫布這個主題？

因為鐵人賽只有 30 篇（這樣講好像很欠揍，30 篇需要很大的努力跟毅力，各位參賽者辛苦了，大家加油！），沒有辦法講什麼很高深的學問（我應該也沒辦法啦 xD）。

但是如果只講一個比較簡單的主題非常有可能我沒幾篇就會開始發散，才有辦法填充到 30 篇的長度。

因此我左思右想，稍微規劃了一下 30 天的篇幅，後來決定聚焦在無限畫布這個主題上面。

主要有以下幾個原因：

• 無限畫布表面上看起來是很簡單的主題，但是實作起來背後需要做的事情多到我覺得很值得記錄下來。
• 在台灣，甚至是中文圈中，鮮少有一個比較全面探究怎麼實作無限畫布的系列文章，（但我也不敢說自己有多全面啦 xD）也有可能是我還沒有發現，如果你有看到什麼很讚的內容也歡迎分享給我跟看這系列的大家！
• 我想要把這個東西當成我個人專案的文件 (誤

後記：我在寫完整個系列的文章之後有找到一個相對完整的教學網站，大家也可以去看一下 連結在這裡 不過這個是以 WebGPU 去繪製的。

我也是站在巨人的肩膀上前進的，從過往鐵人賽的文章中學習到很多，這次本著食人一口，報人一斗的精神想要回饋社群。（雖然我這個量可能沒有辦法到一斗啦，抖）

另外雖然我的組別是選 Modern Web 但那主要是因為我實作的平台是選在目前受眾相對比較多的 web 上面；不過無限畫布背後的實作原理應該也可以應用在別的程式語言與平台上。

只要理解無限畫布背後的運作，後面你想要 port 到其他地方應該容易許多，所以你不一定要熟悉網頁開發，如果你想要寫一個 Desktop App 你也可以從這個系列帶走一些東西。

來一下背景介紹好ㄌ

小弟不才，雖然現在在公司是掛著前端工程師的職稱，但是跟很多前端工程師前輩們比起來應該差蠻多的。

在我剛轉職到軟體相關的工作時，我並沒有想像有一天我會成為一名前端工程師，甚至我有點排斥前端的工作。

是直到我開始做某些專案的時候，我發現其實很多好的主意都需要一個好的視覺化介面去跟使用者互動；在需要人機介面的專案時更是如此，我才開始慢慢願意去嘗試前端相關的軟體工作。目前正在前端的路上修煉中。

我是非本科系畢業的（先打一下預防針 xD），所以各位請不要對我在軟體工程方面的造詣有不切實際的期待 xD（應該本來就沒有了）

不過我大學的時候，秉持著不務正業的精神有照著資工輔系的學程去修課，雖然不能跟各位一樣飛上天，但應該也略懂略懂一點點。

但是寫錯的地方也請大家多多指教。

誰不適合看？

我不會說什麼 「數學只要會1+1就能夠懂」 這種不切實際的宣言，我必須很認真誠實的說，如果你很痛恨或是不熟悉向量計算或是三角函數，這個系列你可能會看的比較痛苦，你會覺得我為什麼要寫這些東西毒害你的眼睛跟腦袋。

如果你在看的當下，這個系列的最後一篇文章出了，你可以直接跳到最後面去撈成品，我把連結貼在這裡 (鐵人賽結束才會有連結喔！)。

至於數學方面的東西，我會儘量寫詳細一點，如果有不清楚的地方我也會視情況跟我的能力再補充多一點。

如果你自覺數學很差但是真的很想啃下去，那真的只能賽後輔導了（聽起來好像怪怪的）但我相信社群的大家都很熱心，如果發問的話，有看到的人也能夠解釋解釋的。（也非常有可能你的問題還是只有我在解釋xD）

那，有誰適合看嗎？

數學不會就是不會，留下來的人，你可能還在疑惑什麼是無限畫布？或是你知道無限畫布是什麼然後你有興趣。不了解無限畫布的讀者，我在下一篇會稍微比較詳細介紹無限畫布是什麼，可以等明天的文章再決定你要不要一起踏上旅程～

至於有興趣的人，我不會讓你失望的！

不過不免俗還是列一些例子：

• 你想創造出下一個 Figma，然後真的賣給 adobe，狠賺一筆
• 你有用過應用無限畫布的產品，你也想要做一個（怎麼感覺跟第一個人很像）
• 你覺得 HTML 的 canvas 很炫，想知道它可以怎麼應用
• 你對 Creative Coding 很有興趣，看到很多大神用 canvas 創作，你也想用 canvas 創作，你加 canvas 就是無限
• 你在做一個賽馬模擬器，然後你突然想到你需要一個貝茲曲線編輯器去沿著現實世界的賽馬場畫一個路線讓你的模擬器可以有賽道模擬，然後你就想到你可能需要一個無限畫布（你現在的女友會是你太太，要對她好一點）
• 你是搜尋無限寶石進來的(抱歉我欺騙你的感情)
• 你認識我，來看我撐不撐得下去的

這個系列文不是

為了不讓大家有錯誤的期待，容許我來說明一下這個系列文不會寫到的事情。

• 這不是一個 zero to hero 教 canvas 或是 JavaScript 的系列，canvas 有太多太複雜可以玩的東西，除了在前面講解基本 HTML canvas API 跟後面的幾個展示無限畫布的應用外，我不會花太多時間在一一講解每個 canvas 的 API，或是它可以做什麼很酷的事情。這個系列就專注在一個主題：無限畫布。
• 這不是一個程式新手向的系列，我並不會一步一步教讀者怎麼寫程式（很怕誤人子弟），或是有關程式的概念。預設是你已經有至少學習過一個程式語言（希望是 JavaScript/TypeScript），也有一點點 OOP 的概念，不需要到很艱深的程式概念或是演算法。
• 這不是一個侷限在任何前端框架/函式庫的系列，我會示範無限畫布背後的實作，但是我只會使用 Vanilla JS（加上 TypeScript） 並不會把它限制在某一個特定的前端框架/函式庫的架構底下。
  • 主要的原因是可以最大程度讓更多人了解無限畫布，而不需要各種前端框架/函式庫的前置知識。你知道無限畫布怎麼做之後，想要整合進去你慣用的框架/函式庫就會是另外的課題（但是應該不會很困難，我有初步試過）。如果在整合的時候有任何問題，我也可以看看我有沒有辦法幫忙解決！

會用到的

技術

• HTML （但你其實只需要會在 HTML 裡面寫出 canvas 這個 tag 應該就可以了，本系列會著重在 JavaScript 上面）
• CSS (很少用到，我只是要滿版 canvas 做示範而已，或是非滿版但是擺放在螢幕各地的 canvas )
• TypeScript/JavaScript (我範例會使用 TypeScript，但是如果你只會 JavaScript 應該也可以跟著做，只是有些 TypeScript 帶來的開發體驗可能就沒辦法享受到（但相對的 TypeScript 帶來的痛苦你也閃開了）)
• Canvas API （如果有用過會比較容易跟著做，但是沒經驗的話我使用之前也會解釋要用到的 API）

工具

我平常開發是使用 macOS，但是用到的開發工具都是跨平台的

• 文字編輯器 (可以的話，盡量用程式開發的 IDE 會讓你的生活比較簡單，但你如果要用 Word 我也不會阻止你) 個人是使用 VS Code 不過最近 cursor 好像蠻紅的？
• 瀏覽器 (Chrome, FireFox, Safari, Edge 都可以，但是 IE 就讓他留在過去吧) （個別瀏覽器在 canvas API 的解釋上有一些些差異，後面的文章會提到，雖然有差異但是大同小異。）
• nodejs, npm, 和 bundler (我會使用 vite，但是我會把指令都先寫好，你不需要有任何 bundler 的前置知識，但是你可能要會 npm run 跟 npm install)

在後續的文章裡面，我會把初始環境建立好然後把它上傳到 GitHub 上，讓大家如果有興趣的話都可以 clone 下來一起跟著做。

後續我們有用到 bundler 的時候，我不會在設定檔上面有太多著墨，所以 bundler、TypeScript、等等的額外的東西我都會先用好，大家只需要 clone 下來然後跟著指令做就好。

就是盡量把不是核心的東西都處理好，讓這個系列專注在無限畫布及其應用上面。

這個系列文除了原生的 Web API 以外不會用到其他的函式庫，所有的東西都會是用自己造輪子的概念。（認真說，全部自己實作雖然比較耗費時間，但是會有比較深刻的印象；以學習為目的來說是比較理想的做法，但學習完之後如果有好用的 library 就應該要去使用不要執著在自己的產物，我自己是還在這方面上面努力啦 xD）

那就讓我們開始吧！

明天啦，明天開始。