（1）SVG： SVG 可縮放矢量圖形（Scalable Vector Graphics）是基于可擴(kuò)展標(biāo)記語言 XML 描述的 2D 圖形的語言，SVG 基于 XML 就意味著 SVG DOM 中的每個(gè)元素都是可用的，可以為某個(gè)元素附加 Javascript 事件處理器。在 SVG 中，每個(gè)被繪制的圖形均被視為對象。如果 SVG 對象的屬性發(fā)生變化，那么瀏覽器能夠自動(dòng)重現(xiàn)圖形。

其特點(diǎn)如下：

1.不依賴分辨率

2.支持事件處理器

3.最適合帶有大型渲染區(qū)域的應(yīng)用程序（比如谷歌地圖）

4.復(fù)雜度高會(huì)減慢渲染速度（任何過度使用 DOM 的應(yīng)用都不快）

5.不適合游戲應(yīng)用

（2）Canvas： Canvas 是畫布，通過 Javascript 來繪制 2D 圖形，是逐像素進(jìn)行渲染的。其位置發(fā)生改變，就會(huì)重新進(jìn)行繪制。

其特點(diǎn)如下：

1.依賴分辨率

2.不支持事件處理器

3.弱的文本渲染能力

4.能夠以 .png 或 .jpg 格式保存結(jié)果圖像

5.最適合圖像密集型的游戲，其中的許多對象會(huì)被頻繁重繪

注：矢量圖，也稱為面向?qū)ο蟮膱D像或繪圖圖像，在數(shù)學(xué)上定義為一系列由線連接的點(diǎn)。矢量文件中的圖形元素稱為對象。每個(gè)對象都是一個(gè)自成一體的實(shí)體，它具有顏色、形狀、輪廓、大小和屏幕位置等屬性。