JS画线，虽然很原始，但是兼容所有浏览器

阅读更多

用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测试一下

 

最后还是希望HTML5早日普及，我这种写法早日淘汰！