兼容IE和FF的一组画图函数

最新推荐文章于 2023-04-24 01:34:37 发布

Xviewee

最新推荐文章于 2023-04-24 01:34:37 发布

阅读量802

点赞数

分类专栏： WEB开发文章标签： ie 360

WEB开发专栏收录该内容

80 篇文章 0 订阅

订阅专栏

 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  

<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>Untitled 1</title>  
<style type="text/css">  
.style1 {  
    font-size: x-small;  
}  
</style>  
</head>  

<body>  
<span class="style1">  
<script type="text/javascript">  
function makedot(x,y){  //画点函数  
  document.write("<div style='height:1px;position:absolute;left:"+x+"px;top:"+y+"px;width:1px;background:#f00;overflow:hidden'></div>")  
}  

/**  
  函数功能：根据给定的圆心和半径画圆  
  函数思路：根据半径及圆心坐标利用数学方法计算从0°到360°的每点的坐标，并画出来。  
*/  
function circle(x,y,r){  //(x,y)圆心，r半径  
  var dotx,doty,radio;  
  var Pi=Math.PI;  
  makedot(x,y);  
  for(var i=0;i<360;i+=0.5){  
    radio=i*Pi/180;  
    dotx=r*Math.cos(radio)+x;  
    doty=r*Math.sin(radio)+y  
    makedot(dotx,doty);  
  }  
}  

/**  
  函数功能：根据指点矩形左上角坐标及长宽绘制矩形。  
  函数思路：根据左上坐标及长宽，计算横纵向边每点的坐标  
*/  
function rect(x,y,w,h){  //(x,y)左上角坐标,w,h 宽与高  
  for(var i=0;i<w;i++){  
    makedot(x+i,y);  
    makedot(x+i,y+h);  
  }  
  for(var i=0;i<h;i++){  
    makedot(x,y+i);  
    makedot(x+w,y+i);  
  }  
}  

/**  
  函数功能：根据两点坐标画直线。  
  函数思路：根据两点的坐标计算机斜率，然后根据第一个点坐标及斜率计算直线上所有点然后画线。垂直线特殊处理  
*/  
function line(x1,y1,x2,y2){  
  var slope=(y2-y1)/(x2-x1);  //斜率  
  var diff=x2-x1;  
  if(x1<x2){  
    for(var i=0;i<diff;i++){  
      makedot(x1+i,y1+slope*i);  
    }  
  }else if(x1>x2){  
    for(var i=0;i>diff;i--){  
      makedot(x1+i,y1+slope*i);  
    }  
  }else{  //画垂直线  
    var temp=y2-y1;  
    if(temp>0){  
      for(var i=0;i<temp;i++){  
        makedot(x1,y1+i);  
      }  
    }else{  
      for(var i=0;i>temp;i--){  
        makedot(x1,y1+i);  
      }  
    }  
  }  
}  

/**  
  函数功能：根据给定的三点坐标画三角形  
  函数思路：直接利用画线函数画三条线即可  
*/  
function triangle(x1,y1,x2,y2,x3,y3){  
  line(x1,y1,x2,y2);  
  line(x2,y2,x3,y3);  
  line(x1,y1,x3,y3);  
}  

/**  
  函数功能：根据给定的一系列坐标点画多边形  
  函数思路：循环读取坐标点，在当前坐标点与下一坐标点之间连线  
*/  
function polygon(){  
  var args=arguments.length;  
  if(args%2!=0) return -1;  
  var realargs=args/2;  //坐标个数  
  for(var i=0;i<realargs-1;i++){  
    line(arguments[i*2],arguments[i*2+1],arguments[i*2+2],arguments[i*2+3]);  
  }  
  line(arguments[i*2],arguments[i*2+1],arguments[0],arguments[1]);  
}  
circle(500,500,200);  
rect(100,100,200,100);  
triangle(200,200,100,400,300,400);  
polygon(300,300,400,100,600,100,700,300,600,500,400,500);  
</script>  
</span>  
</body>  

</html> 

 

代码很简单，就不用我多解释了。。
@ Tisty的兵工厂

Xviewee

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
兼容IE和FF的一组画图函数

alimama_pid="mm_10809884_1047205_2744758"; alimama_titlecolor="0000FF"; alimama_descolor ="000000"; alimama_bgcolor="FFFFFF"; alimama_bordercolor="E6E6E6"; alimama_linkcolor="008000";
复制链接

扫一扫