HTML5（十）——Canvas 與 SVG 區別

作為一名前端攻城獅，Canvas 和 SVG 對於我們並不陌生，canvas 是 HTML5 提供的新元素，而 svg 存在的時間要比 canvas 長很多，svg 並不屬於 html，最初的 svg 是由 XML 定義的，在 html 5 中 canvas 與 svg 看着相似，其實不同。

一、基本介紹

Canvas

• 通過 js 來繪制 2D圖形。
• canvas 圖像單位是像素。
• canvas 圖像繪制完畢之后，瀏覽器將不再關注它，如果位置發生變換，就需要重新繪制。

SVG

• svg 使用 XML 描述的2D圖像。
• svg 是基於 xml 的，所以 svg 中繪制圖形還是使用的元素，js 給元素任意添加事件。
• svg 繪制的圖像是一個對象，如果對象的屬性發生改變，瀏覽器將重新繪制圖形。

二、SVG與Canvas比較

1. svg 是一種矢量圖，而 canvas 依賴於分辨率。所以 svg 放大不會失真，但是 canvas 繪制的圖形會失真。
2. svg 支持事件處理器，而 canvas 不支持事件處理器。
3. svg 中的文字獨立於圖像，文字可保留，可編輯和可搜索，canvas 的文本渲染能力弱。
4. canvas 適合圖像密集型的游戲，頻繁地重繪圖像，svg 繪制的復雜度高時減慢渲染的速度。
5. canvas 繪制的圖形可以多種格式 (jpg、png) 保存圖片，但是 svg 繪制的只能以 .svg 格式保存，使用時可以引入 html 文件。
6. canvas 適合開發游戲，svg 不適合游戲應用。

三、如何應用

2.1、功能上來說

canvas 是一個畫布，繪制出來的圖形是位圖，因此 canvas 可以繪制圖片，在實際應用中，由於渲染性能高，所以大型游戲開發都用的 canvas 。除此之外，還有統計中常見的柱狀圖、餅圖、雷達圖等也使用的 canvas 。而 svg 繪制的是矢量圖，放大后不會失真，所以很適合做地圖。

2.2、操作方面講

canvas 繪制的圖形，只能給 canvas 整個畫布添加事件，而不能給某個圖形或文件添加事件處理器，但是 svg 支持事件綁定，如果需要添加帶有事件的動畫效果時，就需要選擇 svg。