Html5新增元素中Canvas 與內聯SVG的比較！

標籤：bsp   size   應用程式   基於   標籤   strong   str   放大   處理器   

SVG與Canvas的區別與比較如下：

　　　svg：使用xml描述2D圖形，canvas使用javascript描述2D圖形。

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

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

 

　　　　　　　　　　Canvas　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　           SVG

　　<canvas> 標籤定義圖形，比表和其他映像，但必須使用指令碼(通常是JavaScript)來繪製圖形。　　　　　　使用 XML 格式定義圖形,用於定義用於網路的基於向量的圖形,映像在放大或改變尺寸的情況下其圖形品質不會有損失.
　　依賴解析度　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 不依賴解析度
　　不支援事件處理器　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 支援事件處理器
　　弱的文本渲染能力　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 最適合帶有大型渲染地區的應用程式（比如Google地圖）
　　能夠以 .png 或 .jpg 格式儲存結果映像　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 複雜度高會減慢渲染速度（任何過度使用 DOM 的應用都不快）
　　適合用於映像密集型的遊戲，其中的許多個物件會被頻繁重繪　　　　　　　　　　　　　　　　　　　　　　　 不適合遊戲應用

 

　　

 

 

本文在撰寫中參考過以下以下網站的資料：

http://www.runoob.com/html/html5-svg.html　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　

Html5新增元素中Canvas 與內聯SVG的比較！