js画直线

最新推荐文章于 2023-04-08 21:18:37 发布

阿拉斯猪饲养员

最新推荐文章于 2023-04-08 21:18:37 发布

阅读量3.2k

点赞数 1

分类专栏： javascript 文章标签： javascript html

本文链接：https://blog.csdn.net/qq_33432559/article/details/73196106

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

<html> 
<head> 
<script type="text/javascript"> 
function   mUp(){ 
    var   x0,y0; 
    x0=window.event.offsetX; 
    y0=window.event.offsetY; 
    document.fr1.x.value=x0; 
    document.fr1.y.value=y0; 
    } 
function   mMove(){ 

} 
var   x1,y1,x2,y2; 
function   mDown(){ 
   
    
	    x1=document.fr1.x.value; 
	    y1=document.fr1.y.value; 
  
	    x2=window.event.offsetX; 
	    y2=window.event.offsetY; 
   
    //动态调用画直线函数，drawLine在下面做了定义 
    
    	drawLine(parseInt(x1),parseInt(y1),parseInt(x2),parseInt(y2), "#0000cc ",2,0); 
    
} 
/******************   JS2D函数集     ******************* 

    作者：neweroica         2003-3-28 

    CopyRight   (C)   2003 

    在引用或转载时请保留此版权信息，谢谢!!! 

    本函数集可以单独存成一个js文件： "JS2D.js " 

***************************************************/ 

/*************   画点   ************** 
    x,y           点所在的屏幕坐标（像素） 
    color       颜色（字符串值） 
    size         大小（像素） 
**********************************/ 
function   drawDot(x,y,color,size){ 
    document.write( " <table   border= '0 '   cellspacing=0   cellpadding=0> <tr> <td   style= 'position:   absolute;   left:   "+(x)+ ";   top:   "+(y)+ ";background-color:   "+color+ " '   width= "+size+ "   height= "+size+ "> </td> </tr> </table> ") 
} 

/*************   画直线   ************** 
    x1,y1       起点所在的屏幕坐标（像素） 
    x2,y2       终点所在的屏幕坐标（像素） 
    color       颜色（字符串值） 
    size         大小（像素） 
    style       样式 
                    =0         实线 
                    =1         虚线 
                    =2         虚实线 
**********************************/ 
function   drawLine(x1,y1,x2,y2,color,size,style){ 
	//x1=200,x2=500,y1=100,y2=400,color="#000";
    var   i; 
    var   r=Math.floor(Math.sqrt((x2-x1)*(x2-x1)+(y2-y1)*(y2-y1))); 
    var   theta=Math.atan((x2-x1)/(y2-y1)); 
    if(((y2-y1) <0&&(x2-x1)> 0)||((y2-y1) <0&&(x2-x1) <0)) 
        theta=Math.PI+theta; 
    var   dx=Math.sin(theta);//alert(dx) 
    var   dy=Math.cos(theta); 
    for(i=0;i <r;i++){ 
        switch(style){ 
            case   0: 
                drawDot(x1+i*dx,y1+i*dy,color,size); 
                break; 
            case   1: 
                i+=size*2; 
                drawDot(x1+i*dx,y1+i*dy,color,size); 
                break; 
            case   2: 
                if(Math.floor(i/4/size)%2==0){ 
                    drawDot(x1+i*dx,y1+i*dy,color,size); 
                } 
                else{ 
                        i+=size*2; 
                        drawDot(x1+i*dx,y1+i*dy,color,size); 
                } 
                break; 
            default: 
                drawDot(x1+i*dx,y1+i*dy,color,size); 
                break; 
        } 
    } 
} 
</script> 

</head> 

<body   onMouseDown= "mDown(); "   onMouseMove= "mMove(); "   onMouseUp= "mUp(); "> 
<form     name=fr1> 
<input   type="text"   name="x"> 
<input   type="text"   name="y"> 

<div id="line" style="width: 800px;height: 500px;border: 1px red solid;"></div>
</form> 
</body> 
</html>

阿拉斯猪饲养员

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
js画直线

function mUp(){ var x0,y0; x0=window.event.offsetX; y0=window.event.offsetY; document.fr1.x.value=x0; document.fr1.y.value=y0; } function mMove(){ } var x1,y1
复制链接

扫一扫