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