《JavaScript高效圖形程式設計（修訂版）》——6.2 位圖、矢量圖，或兩者兼而有之？

本節書摘來自異步社群《javascript高效圖形程式設計（修訂版）》一書中的第6章，第6.2節，作者：【美】raffaele cecco著，更多章節内容可以通路雲栖社群“異步社群”公衆号檢視

畫布為不同的應用，設計了一個小而精的矢量圖和位圖指令集。兩者之間的差別是什麼？

矢量圖

矢量圖形由直線和曲線的數學表示定義。你可以填充矢量形狀或/和描繪其輪廓。矢量圖形的關鍵優勢在于它們可以縮放到任意大小而不損失品質：邊緣和細節依舊鋒利。矢量圖最适合單色或漸變區域面積較大、細節密度較小的圖像。最典型的有：圖表、圖形、旗幟、線路圖和卡通風格的圖像。因為其數學特性，javascript操作矢量圖特别友善。

位圖

位圖圖像（如無所不在的jpeg格式）是不同顔色的像素組成的網格。它們不能很好地進行縮放，當放大時将看到明顯的方塊，而縮小時将損失資訊。這是因為單個像素不是被放大了就是被丢失了。有些畫布實作可以通過使用模糊濾波來降低這種不良效應。位圖最适用于有着大量細節的攝影風格的圖像。

警告：

無論如何生成圖像，畫布最終可視的輸出結果始終是位圖。如果你要利用矢量縮放的優勢，你需要使用矢量圖指令在新的尺度下重繪圖像。僅僅使用浏覽器互動或css來放大畫布，其效果和放大位圖圖像一樣：會有塊狀/模糊效應。