瀏覽器端繪圖技術SVG VML Canvas WebGL介紹

　　瀏覽器端的繪圖技術從種類上可以分為：基於畫素的繪製API，典型代表是 HTML5 Canvas；向量圖形繪製API，典型代表是微軟的 VML 與 W3C主推的SVG；3D圖形API，典型代表是 WebGL；它們都是原生的瀏覽器繪圖技術，不用安裝第三方外掛。

　HTML5 Canvas

　　 HTML5 Canvas是基於畫素的渲染技術實現，放大與縮小很麻煩，點陣圖大家都懂。Canvas 只是一個html標籤元素，自己並沒有行為，但卻把一個繪圖 API 展現給客戶端 JavaScript 以使指令碼能夠把想繪製的東西都繪製到一塊畫布上，擁有繪製路徑，矩形，圓，字元以及影像等功能。支援操作影像畫素，可以支援Base64編碼，在前端就可以儲存為影像，Canvas借鑑程式語言圖形庫的設計思想，對有圖形開發經驗的人掌握起來非常容易。微軟從IE9+開始支援HTML5 Canvas渲染技術，其它主流瀏覽器都支援該技術。如果要在IE8和早期的IE版本使用canvas，可以使用ecxcanvas.js外掛，它是利用IE支援的VML物件來模擬Canvas的繪圖的。

　SVG

　　SVG 指可縮放向量圖形（Scalable Vector Graphics），是基於可擴充套件標記語言（XML），用於描述二維向量圖形的一種圖形格式。SVG由W3C制定，是一個開放標準。 SVG嚴格遵從XML語法，並用文字格式的描述性語言來描述影像內容，具有互動性和動態性, 完全支援DOM。因此是一種和影像解析度無關的向量圖形格式。IE9，火狐，谷歌Chrome，Opera和Safari都支援SVG。IE8和早期版本需額外安裝一個外掛，如adobe的SVG Viewer外掛。

　VML

　　VML的全稱是Vector Markup Language(向量可標記語言)，向量的圖形。但是VML只是被IE支援。VML相當於IE裡面的畫筆，能實現你所想要的圖形，而且結合指令碼，可以讓圖形產生動態的效果。VML是微軟1999年9月附帶IE5.0釋出的，VML其實是Word和HTML結合的產物。微軟把Word裡面的圖形控制元件結合到IE裡面，使IE也具備了繪圖功能。

　WebGL

　　WebGL全稱是Web-based Graphics Language，WebGL是一個跨平臺、免費的底層3D繪圖API的Web標準，它基於OpenGL ES 2.0標準。WebGL是網頁上渲染三維圖形影像的技術，它本身是HTML5規範的一部分。這種繪圖技術標準允許把JavaScript和OpenGL ES 2.0結合在一起，通過增加OpenGL ES 2.0的一個JavaScript繫結，WebGL可以為HTML5 Canvas提供硬體3D加速渲染，這樣Web開發人員就可以藉助系統顯示卡來在瀏覽器裡更流暢地展示3D場景和模型了，還能建立複雜的導航和資料視覺化。顯然，WebGL技術標準免去了開發網頁專用渲染外掛的麻煩，可被用於建立具有複雜3D結構的網站頁面，甚至可以用來設計3D網頁遊戲等等。目前支援WebGL的瀏覽器有 IE11+、Google Chrome 9+、Mozilla Firefox 4+、Safari 5.1+、Opera 12 + 。