用VML画图(一些根本的矢量图)
用VML画图(一些基本的矢量图)注：其中所有的left:top:都是针对图左上角的，比如圆，他的左上角应该是以圆为中
用VML画图(一些基本的矢量图)
注：其中所有的left:top:都是针对图左上角的，比如圆，他的左上角应该是以圆为中心的矩形的左上角
1.line(直线)
a.示例：
?
<html xmlns:v="urn:schemas-microsoft-com:vml"><head><title>创建一条从(0,0)到(200,200)的红色的边框为2px的直线</title><style>v\:* { behavior: url(#default#VML);}</style></head><body><v:line strokecolor="red" strokeweight="2" style="z-index:5;position:absolute;left:233;top:150" from="0,0" to="200,200"/></body></html>
b.专用属性：from??? 起点坐标；
??????????????????? to??? 终点坐标
2.Oval(圆)
a.示例：
?<html xmlns:v="urn:schemas-microsoft-com:vml"><head><title>创建一个宽400高400边框为红色填充为绿色的圆</title><style>v\:* { behavior: url(#default#VML);}</style></head><body><v:Oval strokecolor='red' fillcolor='green' style='width:400;height:400'/></body>
</html>b.专用属性：无
c.其他说明：其高宽主要由style中的width和height决定
3.rect(矩形)
a.示例：
?<html xmlns:v="urn:schemas-microsoft-com:vml"><head><title>创建一个宽100高100的矩形</title><style>v\:* { behavior: url(#default#VML);}</style></head><body><v:rect style="position:absolute;z-index:1;left:320px;top:150px;width:100;height:100;"/></body></html>
b.专用属性：无
c.其他说明：其高宽主要由style中的width和height决定
4.roundrect(圆角矩形)
a.示例：
?<html xmlns:v="urn:schemas-microsoft-com:vml"><head><title>创建一个圆角矩形</title><style>v\:* { behavior: url(#default#VML);}</style></head><body><v:roundrect style="position:absolute;z-index:1;left:220;width:100;top:100;height:100" fillcolor="red" strokecolor="red" strokeweight="1px" arcsize="0.15"/></body></html>
b.专用属性：arcsize??? 描述圆矩形四角的弧度值，0-0.5，默认值0.05
c.其他说明：其高宽主要由style中的width和height决定
5.arc(圆弧)
a.示例：
?<html xmlns:v="urn:schemas-microsoft-com:vml"><head><title>创建一个圆弧</title><style>v\:* { behavior: url(#default#VML);}</style></head><body><v:arc style="z-index:1;left:110;width:100;position:absolute;top:10;height:100" startangle="-180" endangle="0"/></body></html>
b.专用属性：startangle??? 圆弧的起点缺口，取值范围-360-360，默认值-180；
??????????????????? endangle??? 圆弧的终点缺口，取值范围-360-360，默认值null(0)
c.其他说明：其高宽主要由style中的width和height决定
6.polyline(多边形)
a.示例：
?<html xmlns:v="urn:schemas-microsoft-com:vml"><head><title>创建一个多边形</title><style>v\:* { behavior: url(#default#VML);}</style></head><body><v:polyline style="z-index:1;left:71;position:absolute;top:225" points="0,0,30,-40,100,100,0,0" filled="t" fillcolor="white"/></body></html>
b.专用属性：points??? 各折点坐标，上例表示(0,0)、(30,-40)、(100,100)、(0,0)四个点
7.curve(曲线)
?<html xmlns:v="urn:schemas-microsoft-com:vml"><head><title>创建一条曲线</title><style>v\:* { behavior: url(#default#VML);}</style></head><body><v:curve style="z-index:1;left:100;position:absolute;top:300" from="0px,0px" to="150px,0px" filled='f' control1="75,150" control2="75,-150"/></body></html>
b.专用属性：from??? 起点
??????????????????? to?????? 终点
??????????????????? control1??? 曲线的第一个曲度
??????????????????? control2??? 曲线的第二个曲度
c.其他说明：control1、control2可用都不用、用一个或用两个都用
8.shape(任意形状)
a.示例：
?<html xmlns:v="urn:schemas-microsoft-com:vml"><head><title>创建任意曲线</title><style>v\:* { behavior: url(#default#VML);}</style></head><body><v:shape style="width:100;height:100" coordsize="100,100" filled="f" strokecolor="blue" path="m 0,0 l 100,100 e"/><v:shape style="width:100;height:100" coordsize="50,50" filled="f" strokecolor="blue" path="m 0,0 l 0,100,100,100,100,0,0,0 e"/><v:shape style="width:100;height:100" coordsize="100,100" filled="f" strokecolor="blue" path="m 0,0 l 0,100,100,100,100,0,0,0 e"/><v:shape style="width:100;height:100" coordsize="100,100" filled="f" strokecolor="blue" path="m0,0 c130,-90,30,90,150,180 e"/><v:shape style="width:100;height:100" coordsize="100,100" filled="f" strokecolor="blue" path="m0,0 c130,-90,30,90,150,180 x e"/></body></html>
b.专用属性：path??? 路径(m??? 起点、 l???? 画直线、 c??? 画曲线、x??? 曲线自动闭合、 e??? 结束)
?????????????????? coordsize??? 比例(实际宽:width*100/coordsize第一个值；实际高:height*100/coordsize第二个值)
?????????????????? type??? 引用模板的名称
9.shapetype(模板)
a.示例：
?<html xmlns:v="urn:schemas-microsoft-com:vml"><head><title>模板使用示例</title><style>v\:* { behavior: url(#default#VML);}</style></head><body><v:ShapeType id="m1" coordsize="1000 1000" fillcolor="yellow"><v:Path v="m0,0 l30,-30,60,0,0,0 e"/></v:ShapeType><v:Shape style="z-index:1;left:271;width:1000;position:absolute;top:225;height:1000" type="#m1"/><v:Shape style="z-index:1;left:371;width:2600;position:absolute;top:225;height:4600" type="#m1"/><v:Shape style="z-index:1;left:271;width:1000;position:absolute;top:300;height:1000" type="#m1" fillcolor="red"/></body></html>
b.其他说明：shapetype是专门用来定义形状摸版的（不可见），而后在由shape标记引用、将模版实例化的按照path子属性值输出多边形（可见）。
10.background(背景)
a.示例：
?<html xmlns:v="urn:schemas-microsoft-com:vml"><head><title>背景示例</title><style>v\:* { behavior: url(#default#VML);}</style></head><body><v:background fillcolor="white"><v:fill angle=50 type='gradient' color2="yellow"/></v:background></body></html>
11.group(容器)
a.示例：
?<html xmlns:v="urn:schemas-microsoft-com:vml"><head><title>容器示例</title><style>v\:* { behavior: url(#default#VML);}</style></head><body><v:group id="group1" style='position:absolute;left:0;top:0;z-index:1;width:100;height:100' coordsize="100,100"><v:oval style="left:100;top:100;width:50;height:50" fillcolor="white"/><v:rect style="left:200;top:100;width:50;height:50" fillcolor="yellow"/><v:rect style="left:100;top:200;width:80;height:80" fillcolor="red"/><v:arc style="left:200;top:200;width:80;height:80" startangle="360" endangle="167" fillcolor="blue"/></v:group><v:group id="group2" style='position:absolute;left:100;top:100;z-index:1;width:100;height:100' coordsize="100,100"><v:oval style="left:100;top:100;width:50;height:50" fillcolor="white"/><v:rect style="left:200;top:100;width:50;height:50" fillcolor="yellow"/><v:rect style="left:100;top:200;width:80;height:80" fillcolor="red"/><v:arc style="left:200;top:200;width:80;height:80" startangle="360" endangle="167" fillcolor="blue"/></v:group><v:group id="group3" style='position:absolute;left:100;top:100;z-index:1;width:200;height:200' coordsize="100,100"><v:oval style="left:100;top:100;width:50;height:50" fillcolor="white"/><v:rect style="left:200;top:100;width:50;height:50" fillcolor="yellow"/><v:rect style="left:100;top:200;width:80;height:80" fillcolor="red"/><v:arc style="left:200;top:200;width:80;height:80" startangle="360" endangle="167" fillcolor="blue"/></v:group></body></html>
b.其他说明：当使用group后，容器内图形的left、top、width、height等值都是相对group的值。
五、二级标记
二级标记可以看作是对有限的属性进行扩展，就像CSS和HTML的关系一样，利用它我们可以做出更漂亮的图画出来，如上边background(背景)中就使用了fill二级标记，下边我们再来看下如何利用二级标记画一条带箭头的直线：
?<html xmlns:v="urn:schemas-microsoft-com:vml"><head><title>二级标记示例</title><style>v\:* { behavior: url(#default#VML);}</style></head><body><v:line style="z-index:5;position:absolute;left:200;top:200" to="0,150" strokecolor="red" strokeweight="10px"><v:Stroke dashstyle="shortdot" endarrow='classic'/></v:line></body></html>
例子中的stroke即为二级标记，它可以用来设置边框样式，除此之外还有shadow(阴影)、fill(填充)、extrusion(立体3D)、 textbox、imagedata(背景图片)等二级标记。二级标记也有自己的属性，我们只须通过设置这些属性就能画出各种漂亮的图来。二级标记的使用也非常简单，直接嵌套于图形标签中即可。
