![[Web Chart系列之一(续)]Web端图形绘制SVG VML HTML5 Canvas 简单实例](https://1500zi.500zi.com/uploadfile/img/15/934/465cb1e29ef38bfeca6f224d7fcedad0.jpg)
前言
本篇是继[Web Chart系列之一]Web端图形绘制SVG,VML, HTML5 Canvas 技术比较的补充和实例说明各种技术的使用方式。
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 . /zh-cn/library/bb263897.aspx MSDN上的VML学习资料 2. /code/vml/index.html一个比较简单、清晰的中文入门教程 3. /dynamicindex11/editor.htm 在线绘制VML图的编辑器， 图形绘制完成可以产生对应的XML Code.
SVG 的用法及实例
SVG在HTML中使用的方式有两种： 1. 和VML一样， 导入命名空间之后， 直接使用svg标签。(有的教程说此方式不能使用， 估计是svg的发展支持了这种方式)<HTML xml:lang="en"xmlns="/1999/xhtml"xmlns:svg="/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="/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" "/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" version="1.1"xmlns="/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="/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="/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却又轰轰烈烈的扛起了大旗。 结果和命运怎样，只有交给时间来抉择了。
