JS画图函数

<! 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 >

 

来自:http://www.cnitblog.com/yemoo/archive/2006/12/03/19909.html