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

redstarofsleep

浏览: 443870 次
性别:
来自: 苏州

最近访客更多访客>>

mulingya

pch272215690

z3996821

sanrenxing_1

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Web前端

浏览器 JavaScript HTML5 ITeye J#

用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早日普及，我这种写法早日淘汰！

15
顶

9
踩

分享到：

纯JS网页上的动态折线图 | Java正则表达式入门[转]

2011-06-29 10:31
浏览 14889
评论(6)
分类:Web前端
查看更多

6 楼 redstarofsleep 2011-07-04

引用

你第一句话就是错的。
利用google excanvas。canvas已经可以运行在任何的浏览器上，包括ie6。
所以你的写法已经被淘汰

Google excanvas只是让IE支持canvas标签的一个库，又不是IE原生就支持咯。。
Google excanvas的原理是什么呢？他的核心是通过IE的VML去实现的。

5 楼 rainsilence 2011-07-03

我实在是不想打击你。

引用

用Javascript画线的方法很多，有SVG，VML、canvas等，但是在现阶段，貌似这些方法都不能兼容所有浏览器。

你第一句话就是错的。
利用google excanvas。canvas已经可以运行在任何的浏览器上，包括ie6。
所以你的写法已经被淘汰

4 楼 j_butterfly 2011-06-29

不错～～支持一下

3 楼 greatghoul 2011-06-29

同好呀！！！

用JavaScript画直线、圆、椭圆(不用VML,Canvas) | #hta #javascript #2d
http://greatghoul.iteye.com/blog/612232

欢迎造访。

2 楼 redstarofsleep 2011-06-29

引用

希望你能接受这种性能，并且不知道你是否听说过VML和SVG

我写的第一句话就说的很清楚，这种方式只是为了兼容所有浏览器，性能当然是不能和其它三种方式比。

引用

用Javascript画线的方法很多，有SVG，VML、canvas等，但是在现阶段，貌似这些方法都不能兼容所有浏览器。

1 楼 DDT_123456 2011-06-29

希望你能接受这种性能，并且不知道你是否听说过VML和SVG

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论