Canvas 和 SVG 的區別是什麼?

語言: CN / TW / HK
ead>

首先簡單説一下Canvas

canvas是H5中新增的標籤,官方解釋説canvas是一塊畫布,可以在網頁中繪製圖像,話不多説,來個例子 ```html

Document

瀏覽器不支持canvas //這就是canvas標籤,當瀏覽器不支持canvas標籤的時候就會在瀏覽器展示出瀏覽器不支持canvas這段話

```

再瞭解一下svg

svg即可縮放矢量圖形,什麼是矢量圖形呢,也就是放大或者縮小不會失真的圖形。svg繪圖時,每個圖形都是以DOM節點的形式插入到頁面中的,我們可以通過js來直接操作這些圖形。

區別

  1. Canvas 主要是用筆刷來繪製 2D 圖形的。
  2. SVG 主要是用標籤來繪製不規則矢量圖的。
  3. 相同點:都是主要用來畫 2D 圖形的。
  4. 不同點:Canvas 畫的是位圖,SVG 畫的是矢量圖。
  5. 不同點:SVG 節點過多時渲染慢,Canvas 性能更好一點,但寫起來更復雜。
  6. 不同點:SVG 支持分層和事件,Canvas 不支持,但是可以用庫實現。