svg 和 canvas 的區別？

Canvas 和 SVG 都允許您在瀏覽器中創建圖形，但是它們在根本上是不同的。

svg 繪製出來的每一個圖形的元素都是獨立的 DOM 節點，能夠方便的綁定事件或用來修改。canvas 輸出的是一整幅畫布；

svg 輸出的圖形是矢量圖形，後期可以修改參數來自由放大縮小，不會是真和鋸齒。而 canvas 輸出標量畫布，就像一張圖片一樣，放大會失真或者鋸齒。

SVG

SVG 是一種使用 XML 描述 2D 圖形的語言。

SVG 基於 XML，這意味着 SVG DOM 中的每個元素都是可用的。您可以爲某個元素附加 JavaScript 事件處理器。

在 SVG 中，每個被繪製的圖形均被視爲對象。如果 SVG 對象的屬性發生變化，那麼瀏覽器能夠自動重現圖形。

<!DOCTYPE html>
<html>
<body>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190" @click="svgClick">
      <polygon points="100,10 40,180 190,60 10,60 160,180" @click="domClick"
      />
    </svg>
</body>
</html>

Canvas

Canvas 通過 JavaScript 來繪製 2D 圖形。

Canvas 是逐像素進行渲染的。

在 canvas 中，一旦圖形被繪製完成，它就不會繼續得到瀏覽器的關注。如果其位置發生變化，那麼整個場景也需要重新繪製，包括任何或許已被圖形覆蓋的對象。

<script type="text/javascript">
    var c=document.getElementById("myCanvas");
    var cxt=c.getContext("2d");
    cxt.moveTo(10,10);
    cxt.lineTo(150,50);
    cxt.lineTo(10,50);
    cxt.stroke();
    c.addEventListener("mousedown", function(event){
        alert("hh")
    });
</script>

對比

Canvas

  1. 依賴分辨率 2. 不支持事件處理器 3. 弱的文本渲染能力 4. 能夠以 .png 或 .jpg 格式保存結果圖像 5. 最適合圖像密集型的遊戲，其中的許多對象會被頻繁重繪

SVG

  1. 不依賴分辨率 2. 支持事件處理器 3. 最適合帶有大型渲染區域的應用程序（比如谷歌地圖）4. 複雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快）5. 不適合遊戲應用
本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/2xow07v9dOmFeblRlY6WCQ

猜你喜歡