高分请教javascript坐标轴作图问题

likegod 2009-02-25 09:06:55

现在我有这样一个函数： y=a/(b+cx)
现在需要用js在坐标轴上画出这个图形，其中，y的取值要介于0到10之间

请问，如何用js表现这样的图形？

...全文

313 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

fuckmall 2011-12-05

打赏
举报

太牛了，太喜欢了，原来javascript还有作图功能，我一定要把它学会了

caiying2009 2009-02-27

打赏
举报





<html>



<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>JS模拟曲线</title>

</head>



<body>

<style>

#line{padding:0;margin:0;border:0;background:#efefef;width:10px;height:10px;overflow:visible;float:left}

.linediv{border:1px #00f solid;border-top:0;border-right:0;height:300px;width:300px;}

.sd{position:absolute;width:1px;height:1px;background:#000;font-size:1px;}

</style>



<span id=x>Y</span>

<div id=line></div><div id=y style="border:0px red solid;width:20px;height:300px;padding-top:280">X</div>

<script language="javascript">

<!--

//曲线：y=3/(4+2x) 

function getposition(obj) {//获取对象位置(top/left坐标)

	var r = new Array();

	r['x'] = obj.offsetLeft;

	r['y'] = obj.offsetTop;

	while(obj = obj.offsetParent) {

		r['x'] += obj.offsetLeft;

		r['y'] += obj.offsetTop;

	}

	return r;

}





//坐标线

var obj=document.getElementById("line")

var lineObj=document.createElement("div");

lineObj.id="linediv"

lineObj.className="linediv"

obj.appendChild(lineObj)



//获取坐标线原点坐标

var p = getposition(lineObj);

px=p['x']

py=p['y']+lineObj.offsetHeight



//划点

var HeightBig=500;//高度放大倍数

var WidthBig=lineObj.offsetWidth;//水平取值范围

for (var i=1;i<=WidthBig;i++){

	var x=i*1,y=3/(4+2*i)*HeightBig; 

	var sd=document.createElement("span")

	sd.className="sd"

	sd.style.top=py-y+"px"

	sd.style.left=px+x+"px"

	lineObj.appendChild(sd)

}

//连线

var PObj=lineObj.getElementsByTagName("span")

for (var i=0;i<WidthBig/4;i++){

	var addT=PObj[i+1].offsetTop-PObj[i].offsetTop

	if (addT &&addT>0)PObj[i].style.height=addT

	else i=WidthBig

}

//-->

</script>

</body>



</html>