位圖與矢量圖

位圖（BitMap）

位圖又叫像素圖，其構成最小單位是像素，在縮放過程中會失真。位圖是一個 HTML 元素，其中的圖形不會單獨創建 DOM 元素。因此我們不能通過 JavaScript 操控位圖內單獨的圖形，不能對其中的具體圖形進行監控。位圖每次更改位圖設置都會重新繪製，位圖相對矢量圖能達到更好的視覺效果，效果越複雜需要的像素越多，圖像文件內存佔比也越大

矢量圖

矢量圖也叫向量圖，在縮放過程中不會失真。其創建的每一個元素都是一個獨立的 DOM 元素，既然是獨立的 DOM 元素，可以通過 css 和 JavaScript 來操控 dom，也可以對每一個 DOM 元素進行監聽。對於矢量圖瀏覽器會記錄每個元素的形狀和顏色算法，來達到縮放也不失真。矢量圖輪廓形狀更容易修改和控制，可以用來做前端優化，但是對於單獨的對象，色彩上變化的實現不如位圖來的方便直接

附一張表格來自掘金小冊如何使用 Canvas 製作出炫酷的網頁背景特效

Canvas	svg
依賴分辨率（位圖）	不依賴分辨率（矢量圖）
單個 HTML 元素	每一個圖形都是一個 DOM 元素
只能通過腳本語言繪製圖形	可以通過 CSS 也可以通過腳本語言繪製
不支持事件處理程序	支持事件處理程序
弱的文本渲染能力	最適合帶有大型渲染區域的應用程序（比如谷歌地圖）
圖面較小，對象數量較大（>10k）時性能最佳	對象數量較小 (<10k)、圖面更大時性能更佳