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