用Javascript画线的方法很多，有SVG，VML、canvas等，但是在现阶段，貌似这些方法都不能兼容所有浏览器。所以我还是用最原始的办法法写了一个画线方法。思路也很简单，就是用一个像素的DIV拼成一条线。
function line(startX, startY, endX, endY, container) {
if (startX == endX) {
if (startY > endY) {
var tempY = startY;
startY = endY;
endY = tempY;
}
for (var k = startY; k < endY; k++) {
createPoint(container, startX, k);
}
}
// y = ax + b
var a = (startY - endY) / (startX - endX);
var b = startY - ((startY - endY) / (startX - endX)) * startX;
if (Math.abs(startX - endX) > Math.abs(startY - endY)) {
if (startX > endX) {
var tempX = endX;
endX = startX;
startX = tempX;
}
var left = container.style.left;
var top = container.style.top;
for (var i = startX; i <= endX; i++) {
createPoint(container, i, a * i + b);
}
} else {
if (startY > endY) {
var tempY = startY;
startY = endY;
endY = tempY;
}
for (var j = startY; j <= endY; j++) {
createPoint(container, (j - b) / a, j);
}
}
}
function createPoint(container, x, y) {
var node = document.createElement('div');
node.className = 'line';
node.style.marginTop = y;
node.style.marginLeft = x;
container.appendChild(node);
}
当然还需要一段CSS来控制样式：
div.line {
position:absolute;
z-index:2;
width:1px;
height:1px;
font-size:1px;
background-color:#0000FF;
overflow:hidden;
}
来一段HTML测试一下
<html>
<head>
<script type="text/javascript" src="../js/jsline.js"></script>
<script type="text/javascript">
function testLine() {
line(1, 2, 88, 88, document.getElementById('container'));
}
</script>
</head>
<body>
<div id="container" style="width:400px;height:400px;border:1px solid #000000;margin-left:50px"></div>
<input type="button" value="line" onclick="testLine();"></input>
</body>
</html>
最后还是希望HTML5早日普及，我这种写法早日淘汰！
分享到：
相关推荐
兼容主流浏览器 IE7+ FF chrome 360 等等
js日历控件 兼容所有浏览器 My97DatePickerBeta4.8
页面放大缩小代码，兼容所有浏览器，代码简单，易学易用。
JS播放声音 兼容所有浏览器 通过js播放声音，例如消息提示等
jQuery placeholder实现源码(兼容所有浏览器)
找了好几个时间插件，就这个比较不错，之前找到一个，不兼容火狐，这个插件能兼容所有浏览器。
本zip包主要是为了到处html页面中的table表格而设计的demo。可以参考文件里的Hello.html和testdao.html两个，经过本人测试都可以导出Excel。IE导出的效果反而比Google浏览器的好看。IE测试版本11.1715.14393.0。
兼容各浏览器的日期控件
JavaScript画线,画图兼容FireFox,IE等浏览器
日期控件 JS 兼容 日历控件 兼容多浏览器日期控件 JS 兼容 日历控件 兼容多浏览器日期控件 JS 兼容 日历控件 兼容多浏览器日期控件 JS 兼容 日历控件 兼容多浏览器
这是一个js控制图片旋转,兼容所有浏览器
兼容所有浏览器日期控件,包括火狐，IE，谷歌，360等等
js简单幻灯片 javascript简单幻灯片 兼容浏览器
这是一个适配所有浏览器的js分页插件，我一直在用，简单方便轻量，重点是适配所有浏览器,适配所有浏览器,适配所有浏览器
这款JS日历，是最经典，兼容所有浏览器 并且准确定跟随输入框
兼容各浏览器的JS点击复制2018年
已经测试过了，兼容所有浏览器。如果有些浏览器显示不出来，可能因为动画的版本和浏览器支持的flash动画版本不一致所致。 对比：原来插入一个flash的代码。 <script src="Scripts/AC_RunActiveContent.js" type=...
jquery 兼容所有浏览器的浮动div位置控制+例子 jquery 兼容所有浏览器的浮动div位置控制+例子 jquery 兼容所有浏览器的浮动div位置控制+例子 jquery 兼容所有浏览器的浮动div位置控制+例子 jquery 兼容所有浏览器的...
js 日历控件大全，可以兼容多种浏览器，firefox,ie6,ie7,ie8等，样式漂亮大方
html5兼容所有浏览器的MP3播放js