推薦：HTML5之SVG 2D入門6—視窗坐標(biāo)系與用戶坐標(biāo)系及變換概述
SVG存在兩套坐標(biāo)系統(tǒng)：視窗坐標(biāo)系與用戶坐標(biāo)系。默認情況下，用戶坐標(biāo)系與視窗坐標(biāo)系的點是一一對應(yīng)的，記下來介紹下坐標(biāo)與變換,感興趣的朋友可以了解下啊，或許對你有所幫助

canvas 與 SVG都能夠使你在瀏覽器中畫圖，但它們的基本原理不同。
SVG
SVG是一種在XML中描述二維圖形的語言。
SVG是基于XML的，意味著在SVG DOM內(nèi)每一個元素都是可用的。你可以為每一個元素增加JS事件處理器。
在SVG中，每一個圖形被記作一個對象。如果一個SVG對象的屬性發(fā)生改變，瀏覽器可以自動重新生成圖形。

Canvas
Canvas能夠在fly上畫2D圖形（使用JS）
Canvas能夠按照像素重新生成。

在Canvas中，一旦圖形完成，就會被瀏覽器忘記。如果圖形位置要發(fā)生改變，那么整個屏幕需要重畫，包括圖形覆蓋的對象。

Canvas 和SVG的比較
下表顯示了canvas與SVG的主要不同點：

Canvas	SVG
依賴分辨率	獨立于分辨率
不支持事件處理器	支持事件處理器
弱文本渲染能力	最適合具有大渲染面積的應(yīng)用（谷歌地圖）
可以保存最終圖片為PNG或者JPG	復(fù)雜圖像，重畫變慢（任何使用DOM很多的情況都會變慢）
最適合許多 對象頻繁重畫的圖形游戲	不適合游戲應(yīng)用

分享：Html5游戲開發(fā)之乒乓Ping Pong游戲示例(一)
它是一款乒乓游戲，有2個玩家使用一個鍵盤比賽;在這一章節(jié)我們將:1.準(zhǔn)備開發(fā)工具2.建立我們的第一個游戲-Ping Pong 3.學(xué)習(xí)使用Jquery JavaScript庫做基本定位 4.獲取鍵盤輸入