首頁 >web前端 >前端問答 >html5畫布和svg的不同有哪些

html5畫布和svg的不同有哪些

青灯夜游
青灯夜游原創
2021-12-17 18:02:382029瀏覽

不同點:1、畫布依賴分辨率,而SVG不依賴分辨率;2、畫布不支援事件處理器,SVG支援事件處理器;3、畫布適合影像密集型的遊戲應用,SVG不適合遊戲應用;4、svg是透過XML定義的,而Canvas是透過javascript定義的。

html5畫布和svg的不同有哪些

本教學操作環境:windows7系統、HTML5版、Dell G3電腦。

Canvas(畫布)是Javascript進行繪圖的,是逐像素繪圖。 Canvas一旦圖象繪製完成,就於瀏覽器無關了,圖象的位置發生變化,整個場景都需要重新繪製,包括已經被覆蓋的元素。

svg是使用xml繪製,可以為svg加入javascript的事件處理器。所有的DOM都是可用的,屬性發生變化,瀏覽器會自動重新繪製。

SVG和Canvas的不同:

Canvas(畫布)

  • ##依賴解析度

  • 不支援事件處理器

  • #弱的文字渲染能力

  • 能夠以.png 或.jpg 格式儲存結果圖片

最適合圖片密集的遊戲,其中的許多物件會被頻繁重繪

Canvas是透過javascript定義的。
  • SVG

  • #不依賴解析度

  • 支援事件處理器

  • 最適合具有大型渲染區域的應用程式(例如Google地圖)

  • 複雜度高會減慢渲染速度(任何過度使用DOM 的應用程式都不快)

不適合遊戲應用程式

svg是透過XML定義的###### ##########相關推薦:《###html影片教學###》###

以上是html5畫布和svg的不同有哪些的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn