JS画图测试源码
function testDrawLine()
{
div1.innerHTML = drawLine(100,200,500,200,"yellow")+drawLine(300,100,300,400,"black")+drawLine(600,400,100,100,"violet")
}
// 画圆
function drawCircle(x0,y0,radius,color)
{
return drawArc(x0,y0,radius,0,360,color)
}
// 画矩形测试
function testDrawRectangle()
{
div1.innerHTML = drawRectangle(200,100,600,200,"blue")+drawRectangle(100,200,400,500,"red")
}
// 画扇形测试
function testDrawSector()
{
div1.innerHTML = drawSector(300,200,120,0,45,"red");
}
/*
画线
*/
function drawLine(x0,y0,x1,y1,color)
{
var rs = "";
if (y0 == y1) //画横线
{
if (x0>x1){var t=x0;x0=x1;x1=t}
rs = "<span style=*top:"+y0+";left:"+x0+";position:absolute;font-size:1px;background-color:"+color+";height:1; width:"+Math.abs(x1-x0)+"*></span>";
}
else if (x0 == x1) //画竖线
{
if (y0>y1){var t=y0;y0=y1;y1=t}
rs = "<span style=*top:"+y0+";left:"+x0+";position:absolute;font-size:1px;background-color:"+color+";width:1;height:"+Math.abs(y1-y0)+"*></span>";
}
else
{
var lx = x1-x0
var ly = y1-y0
var l = Math.sqrt(lx*lx+ly*ly)
rs = new Array();
for (var i=0;i<l;i+=1)
{
var p = i/l;
var px = parseInt(x0 + lx*p);
var py = parseInt(y0 + ly*p);
rs[rs.length] = "<span style=*top:"+py+";left:"+px+";height:1;width:1;position:absolute;font-size:1px;background-color:"+color+"*></span>";
}
rs = rs.join("");
}
return rs
}
/*
画矩形
*/
function drawRectangle(x0,y0,x1,y1,color)
{
if (x0 == x1 || y0 == y1) return;
if (x0>x1) {var t=x0;x0=x1;x1=t}
if (y0>y1) {var t=y0;y0=y1;y1=t}
return "<table style=*top:"+y0+";left:"+x0+";position:absolute*><td bgcolor="+color+" width="+(x1-x0)+" height="+(y1-y0)+"></td></table>";
}
/*
画扇形
*/
function drawSector(x0,y0,radius,startAngle,endAngle,color)
{
var rs = drawArc(x0,y0,radius,startAngle,endAngle,color);
startAngle = startAngle/360*Math.PI*2;
endAngle = endAngle/360*Math.PI*2;
var startx=Math.sin(startAngle)*radius+x0;
var endx=Math.sin(endAngle)*radius+x0;
var starty=Math.cos(startAngle)*radius+y0;
var endy=Math.cos(endAngle)*radius+y0;
rs += drawLine(x0,y0,startx,starty,color);
rs += drawLine(x0,y0,endx,endy,color);
return rs;
}
/*
画弧线
*/
function drawArc(x0,y0,radius,startAngle,endAngle,color)
{
rs = new Array();
tmpar = new Array();
startAngle = startAngle/360*Math.PI*2;
endAngle = endAngle/360*Math.PI*2;
for (var i=startAngle;i<endAngle;i+=(1/radius))
{
var dx = parseInt(Math.sin(i)*radius+x0);
var dy = parseInt(Math.cos(i)*radius+y0);
rs[rs.length] = "<span style=*top:"+dy+";left:"+dx+";position:absolute;height:1;width:1;position:absolute;font-size:1px;background-color:"+color+"*></span>";
}
return (rs.join(""));
}
/*
画曲线
*/
function drawCurve()
{
var rs = new Array();
for (var i=0;i<2*Math.PI;i+=.01)
{
var x = parseInt(300-Math.sin(i)*100);
var y = parseInt(300-Math.cos(i)*100);
rs[rs.length] = "<span style=*top:"+x+";left:"+(i*100+190)+" ;height:1;width:1;position:absolute;font-size:1px;background-color:blue*></span>";
rs[rs.length] = "<span style=*top:"+y+";left:"+(i*100+190)+" ;height:1;width:1;position:absolute;font-size:1px;background-color:blue*></span>";
}
return rs.join("");
}
</script>
<!-- font-size:1px; for IE 6 -->
</body>
</html>