前幾天，我們簡單介紹了 DOM 與 GSAP 動畫。從元素位移、縮放，到時間軸與互動控制，操作的對象幾乎都是網頁上的 HTML 元素，接下來準備進入 Canvas。

不過在開始以前，我今天想先用一篇文章整理瀏覽器常見的圖形技術，算是先稍微撥開戰爭迷霧，替後續的文章建立比較清楚的方向。

瀏覽器除了顯示文字、圖片與網頁介面，也能處理向量圖形、即時 2D 繪圖、3D 場景和 GPU 運算。常見技術包括 DOM／CSS、 SVG、 Canvas 2D、 WebGL 與 WebGPU。

這些技術各自有不同的抽象層級、運作方式與適用場景，彼此之間也經常搭配使用。先理解它們的差異，可以幫助我們建立對瀏覽器圖形技術的基本輪廓，也讓後續遇到不同圖形需求時，更容易判斷該從哪種技術著手。

這些圖形技術還可以簡單粗分成保留模式（Retained Mode）與立即模式（Immediate Mode）。

• 保留模式（如 DOM/CSS、SVG）會由系統記住畫面上每個物件的狀態。你只需要修改屬性，例如位置、顏色或大小，系統就會自動處理更新與重繪。
• 立即模式（如 Canvas 2D、WebGL、WebGPU）則不會替你保存畫面中的物件。你需要自行管理物件狀態，並在每一幀重新下達繪製指令。

接下來我們就逐一介紹各個技術的基礎原理和使用場景~~

DOM / CSS：介面與基礎動畫

這個應該是大家再熟悉不過的。DOM 是瀏覽器讀取 HTML 後建立的文件結構，畫面上的標題、圖片、按鈕和內容區塊，基本上都是 DOM 節點；CSS 則負責外觀、版面與動畫，像是 @keyframes 就能直接製作動畫效果。

通常用在按鈕 Hover、選單展開、卡片翻轉和頁面轉場，優點是直覺，每個元素都有自己的標籤、樣式和事件，也能直接處理鍵盤操作、焦點、無障礙資訊，以及網頁內容的 SEO。

不過，當畫面上有數百甚至數千個元素需要頻繁更新時，瀏覽器也得跟著處理大量的樣式計算、版面配置與繪製，效能很容易開始吃緊。

SVG：向量圖形與視覺化

SVG 的全名是 Scalable Vector Graphics，也就是可縮放向量圖形。它使用點、線、圓形與路徑描述畫面，因此放大後仍能保持清楚。

SVG 裡的圖形也是 DOM 元素。畫面中的圓形、矩形和線條可以分別設定樣式，也能各自接收點擊事件。這種特性很適合 Icon、Logo、圖表、流程圖、地圖和路徑動畫。只要圖形數量不太多，而且每個圖形都需要獨立操作，SVG 通常很方便。

但是 SVG 同樣會遇到元素數量的問題。當向量圖型變得複雜，而且每個節點都持續變動，DOM 的管理成本也會跟著增加。這時候就該考慮使用 Canvas。

Canvas 2D：大量即時 2D 繪圖

Canvas 的思考方式和 SVG 很不一樣。在 HTML 中放入 <canvas> 後，我們會得到一塊可以用 JavaScript 繪製的區域。線條、矩形、圓形、文字和圖片，都能畫在這塊區域裡。

如果在畫布上畫了一個矩形，瀏覽器只知道某些像素被塗上顏色，不知道那裡存在一個叫作「矩形」的物件。想讓矩形移動時，通常要先清除畫面、計算新位置，再重新畫一次。動畫播放期間，這個流程會一幀接著一幀重複執行。

這種方式看起來很複雜，卻很適合頻繁更新的畫面。Canvas 不需要替每顆粒子建立 DOM 節點，只要保存粒子的資料，再於每一幀把它們畫出來。因此粒子動畫、2D 遊戲、簽名板、繪圖工具和圖片處理，都很常使用 Canvas 2D。

代價是許多事情要自己處理。Canvas 裡的矩形不能直接接收點擊事件，我們必須取得滑鼠座標，再判斷使用者是否點中它，鍵盤操作與無障礙資訊也需要另外設計。

WebGL / WebGL2：GPU 與 3D 圖形

同一塊 <canvas> 除了能用來繪製 2D 圖形，也能建立 WebGL 繪圖環境。

WebGL 是瀏覽器中的 GPU 圖形 API，可以把大量頂點與像素運算交給顯示卡處理，因此很適合 3D 場景、複雜特效和大量圖形資料。

WebGL 的自由度很高，但也相對較困難。即使只是畫出一個三角形，也要準備頂點資料、建立 Buffer、編譯 Shader，再下達繪製指令。因此實際開發 3D 網頁時，許多人會使用 Three.js 等函式庫，讓相機、材質、燈光與場景比較容易管理。

3D 模型展示、網頁遊戲、Shader 特效和大量粒子運算都很適合 WebGL。

WebGPU：新一代 GPU API

WebGPU 是新一代的 Web 圖形與運算 API，也是在 <canvas> 上繪製。它同樣能使用 GPU，設計方式則更接近現代圖形 API。截至 2026 年， Chrome、Edge、Firefox、Safari 四大瀏覽器皆已正式支援 WebGPU，可以直接在正式環境中使用。

除了把圖形畫到螢幕上，WebGPU 也能讓 GPU 執行一般用途的平行運算。大量粒子模擬、影像與影片處理、科學計算和機器學習，都可能用到這種能力。

WebGPU 讓開發者可以更明確地管理 GPU 資源與運算流程，程式設計的複雜度也比 Canvas 2D 高出許多，由於 30天的篇幅有限，這個系列應該只會在最後簡單帶到 WebGPU。

五種技術放在一起比較

小結

今天想先建立一個觀念：DOM、SVG、Canvas、WebGL 與 WebGPU 都是瀏覽器裡常見的圖形工具，只是它們處理畫面的方式各有不同。先理解背後大致的運作方式，在面對不同需求時，才比較知道該選哪一種工具，也能少走一些冤枉路。

下一篇開始，我們會實際建立第一張 Canvas 畫布，從座標系統、繪圖環境開始，也會認識之後經常出現的 context。