Web Chart入门（2） Web端图形绘制SVG,VML, HTML5 Canvas简单实例

Web Chart入门（2） Web端图形绘制SVG,VML, HTML5 Canvas简单实例2013-06-30VML 的用法和实例

引入命名空间之后，就可以直接使用标签的方式绘制图形。

如下例：绘制一条从坐标（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类似