因为项目的需求，需要在客户端绘制直线，以达到2点连线的情况。首先想到的就是使用JS了。百度里面Google了下，用JS画直线可以实现，但问题比较大，最简单的就是使用IE的VML画直线，在非IE下基本上都是使用HTML5画直线或形状。
先看下下面的例子
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml"><!--这里需要引入vml-->
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<style type="text/css">
v\:*{behavior:url(#default#VML);}/*这里需要定义样式，IE8下有所改变，下文提到*/
</style>
</head>
<body>
<v:line
from='200,200' <!--说是直线，实际上是线段，通过2个点来确定直线，这里是始点-->
to='600,100' <!--指定线段的终点-->
style='position:absolute;z-index:8'> <!--CSS样式-->
<v:stroke EndArrow="Classic"/><!--这里指定终点的样式，Classic就是箭头-->
</v:line>
</body>
</html>
测试上面的代码，放在IE下浏览，应该看到了一条带箭头的直线。看了上面的注释，应该多少了解一点。这里是使用的纯HTML方式画的直线。
什么是VML
VML的全称是Vector Markup Language(矢量可标记语言)，矢量的图形，意味着图形可以任意放大缩小而不损失图形的质量，这在制作地图上有很大用途。在VML里面，标记使用的是XML扩张，需要一个namespace(命名空间)，你可以使用惯用的“v”作为命名空间。VML不仅可以用来画直线，对于矩形、圆形、图像等都可以简单的实现。具体的可以参考下面的几个文档：
VML基本概念：http://www.cnblogs.com/zr824946511/archive/2010/02/25/1673520.html
VML中文手册：http://www.itlearner.com/code/vml/(须使用IE访问，否则不能看到实例效果)
特别的IE8+
jucelin也是刚刚能基本实现画直线的效果，可测试时发现IE8下面居然一片空白，百度里面Google了一下，发现IE8对VML进行了修改，所以蛋疼的问题又出来了。本来不同内核的浏览器下实现方式就不同，不同的IE还有不同的设计要求。伤不起。。。
IE8修改的地方：E文 http://ajaxian.com/archives/the-vml-changes-in-ie-8
译文：http://www.cnblogs.com/mingle/archive/2009/10/18/1585651.html
JS实现画直线
既然在IE8+下会有不同的设计方法，那么在写的时候也一起加上吧。实际上JS实现比较简单，下面是jucelin写的一段，贴出来分享下，希望得到高手的指导。
<html xmlns:v= "urn:schemas-microsoft-com:vml ">
<head>
<title>IE下使用JavaScript画直线-Power by jucelin</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<style>
v\:*{behavior:url(#default#VML);}
</style>
<script language="javascript">
function showline(){
var v=document.createElement("<v:line></v:line>");
var t=document.createElement("v:Stroke");
//v.style="z-index:5;position:absolute;left:200;top:200";
v.to="150,100";
v.from="0,0"
v.strokecolor="red";
v.strokeweight="2px";
t.EndArrow="Classic";
v.appendChild(t);
document.getElementById("id1").appendChild(v);
}
</script>
</head>
<body onLoad="showline()">
<div id="id1">
<!-- 上面的JS就是根据下面这段代码原型写的
<v:line style="z-index:5;position:absolute;left:200;top:200" to= "0,150" strokecolor= "red" strokeweight= "2px">
<v:Stroke dashstyle="shortdot" endarrow='classic'/>
</v:line>
-->
</div>
<div style="font-size:22px; z-index:99">
<span style="z-index:100">123</span><span style="color:green; z-index:101; margin-left:-15px;">好</span>
</div><
</body></html>
为了使IE8下有效果，就在上面的代码上加了下面的一句话，以强制IE8+下显示IE7下的效果
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
上面的代码在IETest中测试通过，非IE下无效果(虽然知道不能实现，但还是抱着一点运气，呵呵)。
上面的代码中我还注释掉了一段代码，v.style在设置之后会提示找不到属性，jucelin现在不明白到底怎么回事。另外测试上面的代码还发现了奇怪的问题，我并没设置直线的style，而它的z-index属性仍然是最高的，而且<div id=”id1″>的position的属性是absolute。
再修改<div id=”id1″>的CSS属性
<div id="id1" style=" background:#000000; border:10px solid #000;">
显示的就是上面图2 的内容，具体是意义，其实也只是证实上一段的内容。
今天test到现在其实也就测试了IE下的，非IE下的基本上都是说通过HTML5来实现，具体的可以参考下面的一些文档：
在Firefox下画直线：http://www.cnblogs.com/youring2/archive/2009/07/25/1530862.html
HTML5教程：http://www.w3school.com.cn/html5/index.asp
HTML5绘图元素Canvas的使用说明：http://www.w3school.com.cn/html5/html_5_canvas.asp
上面提供的代码jucelin在chrome11.0，Firefox3.0，Opera11.52下均测试可以，因为这些浏览器都已经支持HTML5了，IE8目前还不支持HTML5的全部元素，希望IE9众望所归。
使用jQuery画直线
既然上面讨论了不同的浏览器有不同的设计方式，特别是蛋疼的IE，那么大虾们肯定会想到兼容所有的代码，jucelin首先想到的就是jQuery，呵呵，主要是jQuery可以解决很多兼容性的问题。
这里也不多说，因为我也还没研究，发现很多的插件很强大，如果只是用来画直线，都有点大材小用了。有时间的朋友可以参考下面写jQuery插件，我也会再看看，俺只要画直线，呵呵。
10 jQuery Drawing Plugins：http://www.jquery4u.com/plugins/10-jquery-drawing-plugins/
写在最后的话
1. 痛恨IE9之前的版本，因为它很蛋疼。
2. 在找资料的时候看到有点人提供了纯JS的方式，其实就是画点成线的原理来画“直线”，这样的方式很容易理解，写起来也比较简单，但关键是效率比较低，如果直线很长，就会很明显的增加IE的劳动量，用户体验很差。这个方法只能说在短距离，直线数目少的情况下考虑使用。
3. IE独有的VML很强大，使用起来速度一流，但多版本的设计确实让设计者很头疼。如果产品只是在IE下使用，jucelin还是推荐使用VML画直线。
4. 突然突然突然发现IETest和DW8有冲突，为了测试IE8下效果，电脑死机了2次，泪奔啊。。。
