|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
SVG 與 Canvas 的 6 大區(qū)別比較表
作者:admin 時間:2022-8-10 17:55:34 瀏覽:SVG 縮寫為 Scalable Vector Graphics。它是一種基于矢量的圖形，使用基于 XML 的圖形格式為交互提供支持。SVG 圖像比位圖圖像要好得多。在 SVG 圖像中，矢量圖像由一組固定的形狀組成，在縮放這些圖像時，它會保留圖像的形狀。
Canvas 是一個 HTML 元素，用于在網(wǎng)頁上繪制圖形。它被稱為具有用于在其上繪圖的即時模式圖形應(yīng)用程序編程接口的位圖。元素 Canvas 用作圖形的容器。在 Canvas 中，我們需要腳本來繪制圖形。
以下是 SVG 與 Canvas 的 6 大區(qū)別比較表
| 比較基礎(chǔ) | SVG | Canvas |
|---|---|---|
| 定義 | 它是一種基于 XML 的交互性矢量圖像格式。 | 它是 HTML 中用于在網(wǎng)頁上繪制圖形的元素。 |
| 格式 | 它使用矢量圖像格式。 | 它使用位圖圖像格式。 |
| 靈活性 | SVG 更加??靈活，因?yàn)槲覀兛梢詫⒊叽鐢U(kuò)展到其自然之外 | Canvas圖像不是那么靈活。 |
| 事件處理程序 | 它為事件處理程序提供任何支持。 | 它不提供對事件處理程序的支持。 |
| 應(yīng)用 | 它不適合任何游戲應(yīng)用程序。 | 這些非常適合游戲應(yīng)用。 |
| 程序 | SVG是指繪制程序。 | Canvas是指繪制程序。 |
除此之外，你還可以看看前文SVG 與 Canvas 的五大區(qū)別。
詳細(xì)了解一下 SVG 與 Canvas
W3C 開發(fā)了 SVG。它最初于 2001 年發(fā)布。文件擴(kuò)展名為 .svg 和 .svgz。它的網(wǎng)絡(luò)媒體類型是image/svg+xml，統(tǒng)一類型標(biāo)識符是public.svg-image。位圖圖像由一組固定的像素組成，在縮放位圖時，它會向我們顯示圖像的像素?？梢越柚?Inkscape、adobe illustrator、adobe flash 等矢量圖形編輯器生成 SVG 圖像。
由于 Internet Explorer 等瀏覽器不支持矢量圖像，因此網(wǎng)絡(luò)上的 SVG 使用受到限制。Konqueror 是 2004 年第一個支持 SVG 圖像的瀏覽器。此后，慢慢地，Google 宣布支持 Web 內(nèi)容中的矢量圖像。SVG 現(xiàn)在也支持原生瀏覽器、插件和移動瀏覽器。
Canvas 非常具有交互性，它可以響應(yīng)用戶與任何觸摸事件、關(guān)鍵字和鼠標(biāo)的交互。Canvas 允許選擇將圖像保存為 .png 或 .jpeg。Canvas 在一次處理多個元素方面非常高效，并且在畫布上繪制的對象可以進(jìn)行動畫處理。
Canvas 主要依賴于分辨率，并且它具有復(fù)雜的可視化效果，因?yàn)橛袝r繪制大面積區(qū)域可能會很慢。有幾種策略可用于繪制不同的形狀，如路徑、框、圓、文本和添加圖像。
示例
SVG
<body>
<svg width="300" height="300">
<circle cx="100" cy="100" r="50" stroke="red" fill="blue" />
SVG image not supported!
</svg>
</body>
輸出
Canvas
<body>
<canvas id="Rectangle" width="210" height="120" style="border: 3px solid green">
<script>
var canRect = document.getElementById("Rectangle");
var objContext = canRect.getContext("2d");
objContext.fillStyle='red';
objContext.fillRect(15,15,175,85);
</script>
</body>
輸出
總結(jié)
SVG 與 Canvas 都用于創(chuàng)建或開發(fā)圖像和形狀。開發(fā)人員根據(jù)要求使用 SVG 和 Canvas 來解決他們的目的，例如 SVG 不用于創(chuàng)建游戲等動態(tài)應(yīng)用程序，而 canvas 不用于文本渲染不佳和缺乏動畫。SVG 和 Canvas 都用于在 Web 上創(chuàng)建豐富的圖形，但它們有著根本的不同。
SVG主要依賴文件，而canvas主要使用腳本。SVG 被認(rèn)為更易于訪問，因?yàn)樗鼈冎С治谋?，?Canvas 依賴于 Javascript。因此，瀏覽器不支持 SVG 但仍然可以顯示文本的事件。如果 Javascript 已被禁用，則設(shè)備無法解釋 javascript 輸出。因此，始終有必要根據(jù)需求及其用途來選擇技術(shù)。
你還可以看看前文SVG 與 Canvas 的五大區(qū)別。
相關(guān)文章
- 站長推薦
