javascript 绘图

<html>
<head>


<script type="text/javascript">


var lineH = 3; //线条高度
var cirSize = 2;
var color = "#2E2E2E"; //颜色




function drawHLine(sx,sy,width,height,c)
{
var body = document.body;
var d_div = document.createElement('div');


d_div.style.left = sx + 'px';
d_div.style.top = sy + 'px';
d_div.style.width= width + 'px';
d_div.style.height = height + 'px'; 


d_div.style.position = 'absolute';


d_div.style.backgroundColor = c;


body.appendChild(d_div);
}




function drawCircle(left,top,width,height,c,isBold)
{
var body = document.body;
var e_div = document.createElement('div');


var r;


r = width / 2;


e_div.style.left = (left - r) + 'px';
e_div.style.top = (top - r) + 'px';
e_div.style.width= width + 'px';
e_div.style.height = height + 'px'; 


e_div.style.position = 'absolute';


if(1 == isBold)
{
e_div.style.backgroundColor = c;
}
else
{
e_div.style.border = cirSize+'px solid ' + c;
}


e_div.style.borderRadius = Math.round(width / 2) + 10 + 'px';


body.appendChild(e_div);
}




function drawRect(left,top,width,height,c)
{
var body = document.body;
var r_div = document.createElement('div');


r_div.style.left = (left - (width / 2)) + 'px';
r_div.style.top = (top - (height / 2)) + 'px';
r_div.style.width= width + 'px';
r_div.style.height = height + 'px'; 


r_div.style.position = 'absolute';
r_div.style.backgroundColor = c;
body.appendChild(r_div);
}




</script>


</head>
<body>


</body>
<script>


var baseX = 100;
var baseY = 100;


function drawPicture()
{
var lastPos = 0;


drawHLine(baseX,baseY,38,lineH,color);
lastPos = baseX + 38; 


drawCircle(lastPos + 27,baseY,54,54,color,0);
drawCircle(lastPos + 29,baseY + 2,48,48,color,1);
lastPos = lastPos + 54 + 4;


drawHLine(lastPos,baseY,18,lineH,color);
lastPos = lastPos + 18;


drawCircle(lastPos + 27,baseY,54,54,color,0);
drawRect(lastPos + 27,baseY + 30,65,54,'#FFF');
drawCircle(lastPos + 29,baseY + 2,48,48,color,1);
lastPos = lastPos + 54 + 4;


drawHLine(lastPos,baseY,18,lineH,color);
lastPos = lastPos + 18;


drawCircle(lastPos + 27,baseY,54,54,color,0);
drawRect(lastPos + 27,baseY - 27,65,54,'#FFF');
drawCircle(lastPos + 29,baseY + 2,48,48,color,1);
lastPos = lastPos + 54 + 4;


drawHLine(lastPos,baseY,18,lineH,color);
lastPos = lastPos + 18;


drawCircle(lastPos + 21,baseY + 2,36,36,color,1);
lastPos = lastPos + 42;


drawHLine(lastPos,baseY,38,lineH,color);
lastPos = lastPos + 35;


drawCircle(lastPos + 29,baseY + 2,48,48,color,1);
lastPos = lastPos + 55;


drawHLine(lastPos,baseY,18,lineH,color);
lastPos = lastPos + 18;


drawCircle(lastPos + 27,baseY,54,54,color,0);
drawRect(lastPos + 45,baseY - 15,30,30,'#FFF');
drawRect(lastPos + 45 - 27 - 5,baseY - 15 + 27 + 6,30,30,'#FFF');
drawCircle(lastPos + 29,baseY + 2,48,48,color,1);


lastPos = lastPos + 56;
drawHLine(lastPos,baseY,38,lineH,color);
}






drawPicture();


</script>
</html>