VML画连线箭头，line线加粗

var div=document.createElement("div");
div.innerHTML='

';
document.body.appendChild(div);

一、什么是VML

VML相当于浏览器的画笔，它可以在浏览器中画出任何你想要的图形：小到直线、圆形、圆弧、曲线、矩形、圆角矩形、多边形；大到一张图画、一个动画、甚至于一个游戏。题中既以标明为简明教程，下边我们只限于讨论使用VML在浏览器中画一些直线、圆形、圆弧等小图。

VML是微软1999年前(具体时间不详)制作推出的，并集成到了IE5+浏览器，同样也是Microsoft Office Art(艺术图型,如word的艺术文字)的核心结构。VML由微软Visio、Autodesk、Macromedia等企业推荐给W3C(WWW最高权利协会)，W3C采取、综合了各方的推荐，于1999年初开始发展SVG，并随后不久推出。SVG是综合VML、GML等的改进(输出效率、图型质量、标记扩展)，被推荐为标准，但SVG需要专门的图像阅读器如(Adobe SVG Viewer)，无法直接被浏览器引擎解析，以我见，SVG更适合于精度矢量图型应用软件开发、VML则适合应用在WEB页，有不少文章说VML已过时，但仁者见仁、智者见智，VML我感觉相当健全(图型质量、输出速度)，它编写简单、浏览器可以解析、与HTML等语言完全兼容，它更具有实际WEB页应用的可行性、深层开发的可行性。但遗憾的是目前支持VML的浏览器仅有IE。

二、VML基础知识

如果你熟悉HTML的话，那么学VML并不是一件复杂的事，因为VML和HTML几乎一样，不仅表现在语法上，还有其对CSS、JS的支持都和HTML如出一辙。

1.基本语法
·标签以开头结尾，也支持空标签如
·标签不区分大小写
·标签中间可嵌套其他标签，可以是VML，也可以是HTML
·属性的写法为"parameter=value"，如，属性值可加双引号、单引号、也可不加

2.对CSS和JS的支持
·对CSS支持：

3.VML文件扩展名
·可以是htm、html、asp、php、jsp等，即网页格式

4.VML编辑器
·任何文本编辑器都可以，如记事本、Editplus、Dreamweaver，也有专业的工具如FlashVml3.0

5.一个简单的范例

程序代码
xmlns:o="urn:schemas-microsoft-com:office:office">

说明：
·xmlns:v="urn:schemas-microsoft-com:vml" //关键语句，表示创建一个叫v的XML命名空间，其中v可自行修改
·xmlns:o="urn:schemas-microsoft-com:office:office" //表示引用office相关的标记处理扩展，WEB中很少用，下边不讲
·v/:* { behavior: url(#default#VML);} //关键语句，指明XML名域v引用的数据是VML标记语言
. //创建一条直线，VML在浏览器中画图的语句都是写在之间

三、通用属性

下边这些属性大部分的VML标签中都是可用的，为了便于记忆将其分成了三类，其中第二类和HTML相同、第三类和CSS相同。

1.line(直线)

a.示例：

b.专用属性：from 起点坐标；
to 终点坐标
2.Oval(圆)
a.示例：

b.专用属性：无
c.其他说明：其高宽主要由style中的width和height决定

3.rect(矩形)
a.示例：

b.专用属性：无
c.其他说明：其高宽主要由style中的width和height决定
4.roundrect(圆角矩形)
a.示例：

b.专用属性：arcsize 描述圆矩形四角的弧度值，0-0.5，默认值0.05
c.其他说明：其高宽主要由style中的width和height决定
5.arc(圆弧)
a.示例：

b.专用属性：startangle 圆弧的起点缺口，取值范围-360-360，默认值-180；
endangle 圆弧的终点缺口，取值范围-360-360，默认值null(0)
c.其他说明：其高宽主要由style中的width和height决定
6.polyline(多边形)
a.示例：

b.专用属性：points 各折点坐标，上例表示(0,0)、(30,-40)、(100,100)、(0,0)四个点

7.curve(曲线)

b.专用属性：from 起点
to 终点
control1 曲线的第一个曲度
control2 曲线的第二个曲度
c.其他说明：control1、control2可用都不用、用一个或用两个都用
8.shape(任意形状)
a.示例：

b.专用属性：path 路径(m 起点、 l 画直线、 c 画曲线、x 曲线自动闭合、 e 结束)
coordsize 比例(实际宽:width100/coordsize第一个值；实际高:height100/coordsize第二个值)
type 引用模板的名称
9.shapetype(模板)
a.示例：

b.其他说明：shapetype是专门用来定义形状摸版的（不可见），而后在由shape标记引用、将模版实例化的按照path子属性值输出多边形（可见）。
10.background(背景)
a.示例：

11.group(容器)
a.示例：

b.其他说明：当使用group后，容器内图形的left、top、width、height等值都是相对group的值。

五、二级标记
二级标记可以看作是对有限的属性进行扩展，就像CSS和HTML的关系一样，利用它我们可以做出更漂亮的图画出来，如上边background(背景)中就使用了fill二级标记，下边我们再来看下如何利用二级标记画一条带箭头的直线：

例子中的stroke即为二级标记，它可以用来设置边框样式，除此之外还有shadow(阴影)、fill(填充)、extrusion(立体3D)、textbox、imagedata(背景图片)等二级标记。二级标记也有自己的属性，我们只须通过设置这些属性就能画出各种漂亮的图来。二级标记的使用也非常简单，直接嵌套于图形标签中即可

js vml 画图
2008-10-28 21:00

地址栏里面输入：
javascript:document.body.innerHTML%20=%20""+document.body.innerHTML+""
可以查看运行时生成的html

VML的全称是Vector Markup Language(矢量可标记语言)是基于xml的矢量的图形，意味着图形可以任意放大缩小而不损失图形的质量。微软ie5-8的矢量图标准。由于ie9已经支持SVG了，所以vml到2011年12月已经归档不再更新了，也就是说vml已经在慢慢退出市场，在此我讲这个的原因是虽然退出市场了，但是ie5-8仍旧占据绝大部分的市场，我们不能小视。某种角度看vml的用户更多。我们可以展望未来，但还是不能忘记现在的环境。
用法：
1,添加xml的命名空间 xmlns ，写法如下：
[html] view plain copy

2,添加行为和命名空间的关系，至于这句话的意思后面有详细解释
[html] view plain copy

有了上面的两个步骤我们就可以开始用vml“画画了”。
先上一个例子再解释你就明白个中奥妙了：
[html] view plain copy

image.png

一个简单的圆就画好了，这里面的v:* 是一个css样式，表示所有以"V:"开头的标签的dom元素都继承了这个样式，样式内容就是将vml的默认行为给这些元素，既然是继承样式以前我们经常用class继承，这里也是完全可以的，至于后面的display:inline-block,其实是对ie8样式的兼容问题（经过我测试好像加不加这句ie8显示无碍，既然官方给出这样的写法，自有道理，可能是不同版本当时的兼容问题，也可能后期ie8修复了，在此就不多纠结）。这样一来凡是"v:"开头的标签都有了vml的默认行为，那么我们就可以用vml的方式添加属性了，下面我会开始介绍vml的一些形状以及属性。
在此之前我想很多人可能觉得这样通过标签画的矢量图实在无趣，而且不实用，那么我们就来点实用和令人兴奋的东西，我们让javascript将普通的html文档动态创建出符合vml运行的环境。还是看例子：
[html] view plain copy

我们就这么很方便的动态创建了一个vml矢量图，如果你有心而且追求扩展性的话，其实我们可以写的更加美妙的js，比如通过：
[javascript] view plain copy
document.namespaces.add("v", "urn:schemas-microsoft-com:vml");
添加document的命名空间，我们还可以创建style标签添加样式，然后appendChild到head标签中。这样是不是更好呢？如果暂时觉得太复杂可以跳过这一部分。
这里应为是基础教程所以就不过多的扩展，以后我还会深入讲解的。
vml图形及属性
如有兴趣深入研究的话可以去msdn上面看看。下面是网址。
http://msdn.microsoft.com/en-us/library/bb250524(v=vs.85).aspx
我就是检主要的，常用的给大家：
CoordSize：
[html] view plain copy









CoordSize:其实是网格大小，当CoordSize为 28000,28000 就是将横纵坐标和纵坐标被分成了28000个点，这并不是HTML里面默认像素。具体的形状大小定义还要靠style中的width和height。宽和高都是指的多少个网格的宽和高，放大和缩小调整CoordSize的值就可以搞定。默认元素都是从左上角0,0处开始排放。
属性：
属性其实就是形状的表现样式，从下面开始我就不累赘的写html结构了，如果测试代码可以将上面的body中的代码替换成我所给的代码就行了。
[html] view plain copy



这种写法是将属性添加到单独的标签中。
stroke：画笔属性包括：
strokeweight，dashstyle，strokecolor，opacity="0.5"，linestyle线条风格，,joinstyle线条转折样式，filltype线条填充样式。
dashstyle：

image.png

linestyle：single，thinthin，thinthick，thickthin，thickbetweenthin
详细的可以自己试试，我给一个thickbetweenthin图片，大家有个概念，是那一块儿变了就行：

image.png

joinstyle：round，bevel，miter，完全可以理解为笔触样式，也就是转折地方的样式，我也跟上面一样不多截图了：

image.png

以上就不详细解释，如果想深入了解就课看下面的链接吧，里面都有，用的时候查就可以了。
http://msdn.microsoft.com/en-us/library/bb264134(v=vs.85)
fill： 填充颜色；
type：gradient,frame可以填充图片,pattern,gradientRadial。
[html] view plain copy
strokeweight="2.5pt">

image.png

method:linear,sigma,any,none 渐变方式。
angle角度 渐变角度。

image.png

v:shadow：阴影；
[html] view plain copy

image.png

属性ok了下面继续我们的shape的扩展形状上面讲了直线下面接着说形状，形状其实都是由shape衍生出来的对象，shape是最基础也是最强大的绘图方式。下面先说说衍生出来的形状。
形状
直线：
[html] view plain copy

image.png

折线：
[html] view plain copy



[图片上传中...(image.png-e163b1-1658201366726-0)]

折线就是给几个点从第一个往后链接形成的。
圆形：
[html] view plain copy

image.png

通过left:5;top:5;width:100;height:80可控制长宽以及开始位置。
矩形：
分两种一种是直角矩形：
[html] view plain copy

image.png

另一种是圆角矩形：
[html] view plain copy

image.png

图片：
[html] view plain copy

image.png

img也有很多特殊的属性，可以控制明暗，图片位置，透明度等
grayscale是否为黑白色（true false），backlevel取值（-1，1),gain色相（数字）
图片位置cropbottom, croptop, cropleft, and cropright （0~1）
最后的两个是比较特殊的，不属于形状对象，可以理解成容器对象。
shapetype：
VML的这个功能很有用，模版，顾名思义，它可以减少书写代码的量，又使的代码可读性提高。在理解VML模版的时候，可以和 HTML 的 CSS 一样理解，它是定义好的一种形状，下次使用的时候直接声明 type 属性就可以了。看看下面的例子：
[html] view plain copy

image.png

用type指向上面shapetype的id就可以继承下来定义的形状。
group：
可以理解成一个画布，我们可以修改画布的CoordSize，或者Rotation 来改变画布的属性进而改变画布里面的图形的展现。
[html] view plain copy







![

](https://upload-images.jianshu.io/upload_images/22787871-eb5b82dcb036f57f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

我们用group很简单的改变了图像大小和角度。
到此我们基本介绍了所有vml的对象和属性，后面我会将shape的path专门提出来介绍，应为实在太强大了，以至于我们了解了shape之后上面这些形状我们完全都可以模拟出来。

1:2级标记的通用属性
以前，我们常说的VML通用属性，是针对像oval、rect、roundrect这样的一级标记而言的（只是“极道”的学习规则，我不会在你还是一只“VML菜鸟”时，用太多的一级标记、二级标记这些难懂的词语）。而对于大多数的二级标记，是不支持的，只有一个例外，像Textbox内容，即能当作一级标记又能当作二级标记。不过id 这个通用属性，是所有的一、二级标记均支持的属性。
2:stroke边框 - 专用属性参考表

属性名 默认值 值类型/范围 用途
on true boolean 设置处理是否起效
weight 1pt number 描述边框粗度
color black color 描述边框颜色
opacity 1.0 0.0-1.0 描述边框透明度
dashstyle solid solid,dot,dash,dashdot,longdash,longdashdot,longdashdotdot,shortdot,shortdash,shortdashdot,shortdashdotdot 描述边框的线条样式
filltype solid solid,tile,pattern,frame 描述如何填充边框
src null URLstring 当filltype!=solid时，指定填充边框的图像地址
imagesize auto Vector2D 当filltype!=solid时，描述图像放大倍数
imagealignshape true boolean 当filltype!=solid时，描述图像是否居中对齐
color2 null color 当filltype=pattern时，描述图像的融合背景色
startarrow none none,block,classic,diamond,oval,open,chevron,doublechevron 描述线起点的箭头样式
endarrow none none,block,classic,diamond,oval,open,chevron,doublechevron 描述线终点的箭头样式
startarrowwidth medium narrow,medium,wide 当startarrow!=none时，描述起点箭头的宽度
startarrowlength medium short,medium,long 当startarrow!=none时，描述起点箭头的高度
endarrowwidth medium narrow,medium,wide 当endarrow!=none时，描述起点箭头的宽度
endarrowlength medium short,medium,long 当endarrow!=none时，描述起点箭头的高度
miterlimit 8.0 number 描述边框关节位置的厚度
joinstyle round round(rounded join),bevel(beveled join),miter(miter join) 描述边框参加的样式
endcap round flat,square,round 描述边框结束部分

3:开始二级标记的课程！
通过以前所有章节的学习、在到从本章节开始，就表示你已对VML有了相当的认识、掌握了几乎所有的VML一级标记、如果之前的内容你认真学习了的话。
VML二级标记，你可以这样理解：“它是专门为VML一级标记设计的、它们可以修饰几乎所有用VML一级标记绘制的圆形、矩形、弧形、曲线等几乎所有形状，从头到脚、从边框到背景、从立体到背景图片、从路径轨迹到超文本内容、等等。。二级标记可以将基础的图形包装成各式各样千奇百怪、二级标记可以说是一级标记的一件华丽的衣服”。
不过，学习二级标记，我不会把二级标记的所有属性一一演示、讲解，更不会在去讲之前那些基础的知识（如果你不会，那现在就去看、去学、直到会了、能听懂本章节以后的课程我所说的话为止，我也不会在忌讳不加解释的使用一些诸如交接点/通用属性/专用属性/Vector3D/DVML/coorsize/group/line/curve等等词语）。并仅提供关于该二级属性的常识问题以及一些比较有用的、实用的、好用的、抽象的属性演示例子，你可以通过XXX二级标记专用属性参考表提供的数据，自行更改例题，从而自己了解、掌握XX属性是什么效果、什么用、我怎么挪用应用到XX一级标记图形中。

4:二级标记的兼容性问题
学习中你已知道，二级标记几乎可以“从头到脚”的处理图形几乎任何部分。但是如果图形本身“只有头没有脚”，那么你用专门处理“脚”的二级标记去处理它？不用说，肯定是无效的。那“脚”是什么哪？举个例子，line它只是线只有边框概念而没有填充概念，也就是说stroke二级标记可以处理它但fill(背景填充)二级标记就无法处理它。在说image，它只是图像，没有背景填充的概念，所以fill对它也无法处理。在拿oval、rect、roundrect这些图形跟line线相比，前者由于都有背景概念，所以就支持fill填充。但是，它们却无法使用“箭头”，不然，你说oval、rect哪里是起点？哪里是终点？箭头给它加到哪里合适？而line、arc、curve、polyline、shape却不同，他们都是线条类组成的、或根本就是一条line线，它门有线条起点、终点的概念，所以它们就支持在起点、终点增加箭头。请看下面给图形增加箭头的例子对比

显示情况证明oval、rect就不支持箭头，不过却支持边框颜色定义。 5:stroke边框 - 精彩实例 我制作了几个抽象的例子，源代码自行分析，并请对照专用属性表修改（其实学习二级标记就是学属性！），篇幅问题不一一作出解释。stroke所涉及的属性，关键是活学活用，不要求全部学会、死记住，但建议应学会专用属性表中我用红色给标记的常用属性，当然多了我不反对，只要你有脑子装~

《VML极道教程》原著:沐缘华
1章19节:shadow阴影
1:shadow阴影 - 专用属性参考表

属性名 默认值 值类型/范围 用途
on true boolean 设置处理是否起效
type single single,double,emboss,perspective 描述使用哪种阴影效果
color black color 描述主要阴影颜色
obscured false boolean 暗示看穿图像如果没有在形状上填充
opacity 1.0 0.0-1.0 描述阴影透明度
offset 2pt,2pt Vector2D 描述阴影的XY偏移度
color2 gray color 当type!=single时，描述二次投影颜色
offset2 0pt,0pt Vector2D 当type!=single时，描述二次投影XY偏移度
origin 0,0 Vector2D 当filltype!=solid时，描述阴影与投影的交接度
matrix null string 当filltype!=solid时，描述变换点阵的强度

2:shadow阴影 - 应用精彩实例
即使是极道教程，也没有什么好说的，一切靠你自己分析研究、修改代码达到精通为止。对着例子、属性表自己动手，是最佳的学习方法。另外该标记相当重要，务要靠自己的努力学会！

一、什么是VML

VML相当于浏览器的画笔，它可以在浏览器中画出任何你想要的图形：小到直线、圆形、圆弧、曲线、矩形、圆角矩形、多边形；大到一张图画、一个动画、甚至于一个游戏。题中既以标明为简明教程，下边我们只限于讨论使用VML在浏览器中画一些直线、圆形、圆弧等小图。

VML是微软1999年前(具体时间不详)制作推出的，并集成到了IE5+浏览器，同样也是Microsoft Office Art(艺术图型,如word的艺术文字)的核心结构。VML由微软Visio、Autodesk、Macromedia等企业推荐给W3C(WWW最高权利协会)，W3C采取、综合了各方的推荐，于1999年初开始发展SVG，并随后不久推出。SVG是综合VML、GML等的改进(输出效率、图型质量、标记扩展)，被推荐为标准，但SVG需要专门的图像阅读器如(Adobe SVG Viewer)，无法直接被浏览器引擎解析，以我见，SVG更适合于精度矢量图型应用软件开发、VML则适合应用在WEB页，有不少文章说VML已过时，但仁者见仁、智者见智，VML我感觉相当健全(图型质量、输出速度)，它编写简单、浏览器可以解析、与HTML等语言完全兼容，它更具有实际WEB页应用的可行性、深层开发的可行性。但遗憾的是目前支持VML的浏览器仅有IE。

二、VML基础知识

如果你熟悉HTML的话，那么学VML并不是一件复杂的事，因为VML和HTML几乎一样，不仅表现在语法上，还有其对CSS、JS的支持都和HTML如出一辙。

1.基本语法
·标签以开头结尾，也支持空标签如
·标签不区分大小写
·标签中间可嵌套其他标签，可以是VML，也可以是HTML
·属性的写法为"parameter=value"，如，属性值可加双引号、单引号、也可不加

2.对CSS和JS的支持
·对CSS支持：

3.VML文件扩展名
·可以是htm、html、asp、php、jsp等，即网页格式

4.VML编辑器
·任何文本编辑器都可以，如记事本、Editplus、Dreamweaver，也有专业的工具如FlashVml3.0

5.一个简单的范例

程序代码
xmlns:o="urn:schemas-microsoft-com:office:office">

说明：
·xmlns:v="urn:schemas-microsoft-com:vml" //关键语句，表示创建一个叫v的XML命名空间，其中v可自行修改
·xmlns:o="urn:schemas-microsoft-com:office:office" //表示引用office相关的标记处理扩展，WEB中很少用，下边不讲
·v/:* { behavior: url(#default#VML);} //关键语句，指明XML名域v引用的数据是VML标记语言
. //创建一条直线，VML在浏览器中画图的语句都是写在之间

三、通用属性

下边这些属性大部分的VML标签中都是可用的，为了便于记忆将其分成了三类，其中第二类和HTML相同、第三类和CSS相同。

image.png

————————————————
版权声明：本文为CSDN博主「yinxianluo」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/yinxianluo/article/details/45334837