Canvas

說明：

使用JavaScript繪制2D圖形。

逐像素渲染。

其位置發生變化并重新繪制。

Svg

Description:

由XML描述的二維圖形語言

Svg基于XML，這意味著SvgDOM中的每個元素都可用，并且可以將JavaScript事件處理程序附加到元素。

在SVG中，每個圖形都被視為一個對象。如果SVG對象的屬性發生變化，瀏覽器可以自動再現圖形。

比較

畫布

分辨率相關

不支持事件處理程序

文本呈現能力弱

在中呈現的能力。PNG或。Jpg格式保存結果圖像

最適用于圖像密集型游戲，其中許多對象經常被重繪

SVG

分辨率無關

事件處理器支持

最適用于具有大渲染區域的應用程序（如谷歌地圖）

高復雜度會降低渲染速度（任何過度使用DOM的情況）SVG是一個矢量圖，而canvas不是。然而，SVG使用HTML語法來描述圖形。他們都使用javscript來繪制和操作圖形。如果在實際應用中圖形變化頻繁，對圖形清晰度的要求不是很高，可以考慮使用畫布，比如網頁上的小游戲或者一些很酷的特效，否則使用SVG也很好，圖像質量也很好，比如各種統計圖形、矢量圖標、字體圖標等等等等！而且他們都有一個很好的類庫可以使用，或者更好

HTML5的canvas元素使用JavaScript在網頁上繪制圖像。

畫布是一個矩形區域，您可以在其中控制每個像素。

Canvas有許多方法來繪制路徑、矩形、圓、字符和添加圖像。

HTML5<canvas>元素用于繪制圖形，這是通過腳本（通常是JavaScript）完成的。

<canvas>標記只是一個圖形容器，您必須使用腳本來繪制圖形。

您可以使用畫布以多種方式繪制路徑、方框、圓、字符和添加圖像。

創建畫布

畫布是網頁中的矩形框，通過<canvas>元素繪制。

注意：默認情況下，<canvas>元素沒有邊框或內容。

<canvas>的一個簡單示例如下：<canvasid=“mycanvas”width=“200”height=“100”></Canvas>

注意：標記通常需要指定一個id屬性（通常在腳本中引用），以及由width和height屬性定義的畫布大小。

width和he可以通過CSS設置創建畫布。

畫布是網頁中的矩形框，可以通過CSS&[ltcanvas>元素創建。

注意：默認情況下，<canvas>元素沒有邊框或內容。

<canvas>的一個簡單示例如下：<canvasid=“mycanvas”width=“200”height=“100”></Canvas>

注意：標記通常需要指定一個id屬性（通常在腳本中引用），以及由width和height屬性定義的畫布大小。

您可以將高度和寬度設置為百分比通過CSS。