Básicamente, para crear un círculo, se trata de ubicar como coordenada x al coseno del radiovector de un círculo trigonométrico y como coordenada y al seno:
Un ejemplo:
Código PHP:
<!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=iso-8859-1" />
<title>Documento sin título</title>
<script>
function $(id){return document.getElementById(id);}
function c(b,ax,ay){
var clon=document.createElement('div');
var fragment=document.createDocumentFragment();
clon.style.width=clon.style.height='10px';
clon.style.position='absolute';
clon.style.background='red';
var p=2*Math.PI/6;
for(i=0;i<6;i++){
cl=clon.cloneNode(true);
var ang=p*i;
cl.style.left=Math.cos(ang)*ax+'px';
cl.style.top=Math.sin(ang)*ay+'px';
fragment.appendChild(cl);
}
$(b).appendChild(fragment);
}
onload=function(){
c('b',100,100);
}
</script>
</head>
<body>
<div id="b" style="position:relative; left:100px; top:100px;"></div>
</body>
</html>
Si llamamos a las variables ax y ay, respectivamente, amplitud x y amplitud y, comprobarás que si no tienen el mismo valor se genera una elipse. Ejemplo:
Código PHP:
<!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=iso-8859-1" />
<title>Documento sin título</title>
<script>
function $(id){return document.getElementById(id);}
function c(b,ax,ay){
var clon=document.createElement('div');
var fragment=document.createDocumentFragment();
clon.style.width=clon.style.height='10px';
clon.style.position='absolute';
clon.style.background='red';
var p=2*Math.PI/6;
for(i=0;i<6;i++){
cl=clon.cloneNode(true);
var ang=p*i;
cl.style.left=Math.cos(ang)*ax+'px';
cl.style.top=Math.sin(ang)*ay+'px';
fragment.appendChild(cl);
}
$(b).appendChild(fragment);
}
onload=function(){
c('b',100,50);
}
</script>
</head>
<body>
<div id="b" style="position:relative; left:100px; top:100px;"></div>
</body>
</html>