简单的JAVASCRIPT画图函数.docVIP

简单的JAVASCRIPT画图函数(兼容ie/ff) !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd? html xmlns=/1999/xhtml? head? meta http-equiv=Content-Type content=text/html; charset=utf-8 /? titleUntitled 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;i360;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;iw;i++){? makedot(x+i,y);? makedot(x+i,y+h);? }? for(var i=0;ih;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(x1x2){? for(var i=0;idiff;i++){? makedot(x1+i,y1+slope*i);? }? }else if(x1x2){? for(var i=0;idiff;i--){? makedot(x1+i,y1+slope*i);? }? }else{? //画垂直线? var temp=y2-y1;? if(temp0){? for(var i=0;itemp;i++){? makedot(x1,y1+i);? }? }else{? for(var i=0;itemp;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;irealargs-1;i++){? line(arguments[i*2],arguments[i*2+1],argument