[Web Chart系列之一(續)]Web端圖形繪制SVG,VML, HTML5 Canvas 簡單實例 · Web Chart

### 前言本篇是繼?[[Web Chart系列之一]Web端圖形繪制SVG,VML, HTML5 Canvas 技術比較](http://blog.csdn.net/oscar999/article/details/8474592) 的補充和實例說明各種技術的使用方式。 ### VML 的用法和實例引入命名空間之后，就可以直接使用標簽的方式繪制圖形。如下例：繪制一條從坐標(20,20) 到坐標(200,200) 的直線。 ~~~ <HTML xmlns:v = "urn:schemas-microsoft-com:vml"> <HEAD><TITLE>VML Example</TITLE> <META http-equiv=Content-Type content="text/html; charset=gb2312"> </HEAD> <body> <v:line from="20,20" to="200,200"></v:line> </body> </html> ~~~ 說明： ?xmlns:v = "urn:schemas-microsoft-com:vml" 必不可少，是引入VML的命名空間。比較好的學習資料： 1 . [http://msdn.microsoft.com/zh-cn/library/bb263897.aspx?](http://msdn.microsoft.com/zh-cn/library/bb263897.aspx)? MSDN上的VML學習資料 2. ?[http://www.itlearner.com/code/vml/index.html](http://www.itlearner.com/code/vml/index.html)?一個比較簡單、清晰的中文入門教程 3. ?[http://www.dynamicdrive.com/dynamicindex11/editor.htm](http://www.tool.la/VMLPalette/)? 在線繪制VML圖的編輯器，圖形繪制完成可以產生對應的XML Code. ### SVG 的用法及實例 SVG在HTML中使用的方式有兩種： 1. 和VML一樣，導入命名空間之后，直接使用svg標簽。(有的教程說此方式不能使用，估計是svg的發展支持了這種方式) ~~~ <HTML xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg"> <HEAD> <TITLE> New Document </TITLE> <META NAME="Generator" CONTENT="EditPlus"> <META NAME="Author" CONTENT=""> <META NAME="Keywords" CONTENT=""> <META NAME="Description" CONTENT=""> </HEAD> <BODY> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/> </svg> </BODY> </HTML> ~~~ 很簡單，也是畫一條線，語法基本和VML類似 2. SVG先繪制圖形保存為后綴名為.svg 的文件，再把這個文件嵌入到 HTML文檔中。嵌入可以同個以下三種標簽的方式： 1). <embed> 2). <object> 3). <iframe> 先創建一個.svg后綴的文件 ~~~ <?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <line x1="0" y1="0" x2="300" y2="300" style="stroke:rgb(99,99,99);stroke-width:2"/> </svg> ~~~ embed 標簽方式==》 ~~~ <HTML> <HEAD> <TITLE>Embed SVG </TITLE> </HEAD> <BODY> <embed src="line.svg" width="300" height="100" type="image/svg+xml" pluginspage="http://www.adobe.com/svg/viewer/install/" /> </BODY> </HTML> ~~~ 這是Adobe SVG Viewer推薦的方法。主持所有主流瀏覽器，允許使用腳本；不過這個標簽不是合法的XHTML. object標簽 ==> ~~~ <HTML> <HEAD> <TITLE> Object SVG </TITLE> </HEAD> <BODY> <object data="line.svg" width="300" height="100" type="image/svg+xml" codebase="http://www.adobe.com/svg/viewer/install/" /> </BODY> </HTML> ~~~ 被所有較新的瀏覽器支持，不允許使用腳本。如果安裝了最新版本的Adobe SVG Viewer，會出現一些問題。 iframe 標簽方式==> ~~~ <HTML> <HEAD> <TITLE> IFrame SVG </TITLE> </HEAD> <BODY> <iframe src="line.svg" width="300" height="100"> </iframe> </BODY> </HTML> ~~~ ### HTML5 Canvas 元素繪圖 canvas 是HTML5支持的一種元素。 canvas 元素本身是沒有繪圖能力的。所有的繪制工作必須在 JavaScript 內部完成：同樣是繪制一條線： ~~~ <HTML> <HEAD> <TITLE> Canvas </TITLE> </HEAD> <BODY> <canvas id="myCanvas" width="200" height="100"></canvas> <script type="text/javascript"> var c=document.getElementById("myCanvas"); var cxt=c.getContext("2d"); cxt.moveTo(10,10); cxt.lineTo(150,50); cxt.stroke(); </script> </BODY> </HTML> ~~~ ### 一些說明針對目前的狀況來說， SVG技術應該是web圖形繪制的主流。? IE9 及以上已經支持svg了，而且微軟本身也把VML作為一種過時技術來看待了。 HTML5 技術，基本上處于眾說紛紜的狀態。 Facebook 應用失敗，轉而使用原生應用。 Firefox OS卻又轟轟烈烈的扛起了大旗。結果和命運怎樣，只有交給時間來抉擇了。