JSP中给出两点坐标，画出一条直线

最新推荐文章于 2021-07-02 15:22:35 发布

gao348127719

最新推荐文章于 2021-07-02 15:22:35 发布

阅读量738

点赞数

本文链接：https://blog.csdn.net/gao348127719/article/details/84479383

版权

在JSP中，当给出两个点的坐标的时候，应该如何画线条。

//通过创建点的DIV来组成线(点动成线原理，<!--StartFragment--> ^_^)
function point(x,y){
	    	var oDiv=document.createElement('div');
	    	oDiv.style.position='absolute';
	    	oDiv.style.height='4px';
	    	oDiv.style.width='4px';
	    	oDiv.style.backgroundColor='blue';
	    	oDiv.style.left=x+'px';
	    	oDiv.style.top=y+'px';
	    	//document.body.appendChild(oDiv);
	    	return oDiv;
	    }
	    
	//划线
	    function drawLine(x1,y1,x2,y2){
	    	var x=x2-x1;
	    	var y=y2-y1;
	    	var frag=document.createDocumentFragment();
	    	if(Math.abs(y)>Math.abs(x)){
	    		if(y>0){
	    			for(var i=0;i<y;i++){
	    				frag.appendChild(point(x1,i+y1));
	    			}
	    		}else{
	    			for(var i=0;i>y;i--){
	    				frag.appendChild(point(x1,i+y1));
		    		}
	    		}
	    	}else{
	    		if(x>0){
	    			for(var i=0;i<x;i++){
	    				frag.appendChild(point(i+x1,y1));
	    			}
	    		}else{
	    			for(var i=0;i>x;i--){
	    				frag.appendChild(point(i+x1,y1));
	    			}
	    		}
	    	}
	    	document.getElementById('div1').appendChild(frag);
	    }

加上CSS的样式div{overflow:hidden;}，调用的时候：drawLine(x1,y1,x2,y2)即可，body里面