程式師世界 >> 編程語言 >> JAVA編程 >> 關於JAVA >> Web Chart入門（2） Web端圖形繪制SVG,VML, HTML5 Canvas簡單實例

Web Chart入門（2） Web端圖形繪制SVG,VML, HTML5 Canvas簡單實例

編輯：關於JAVA

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 MSDN上的VML學習資料

2. http://www.itlearner.com/code/vml/index.html 一個比較簡單、清晰的中文入門教程

3. http://www.dynamicdrive.com/dynamicindex11/editor.htm 在線繪制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卻又轟轟烈烈的扛起了大旗。

結果和命運怎樣，只有交給時間來抉擇了。