Consiste en colocarle a un punto un posicionamiento x igual al coseno de un ángulo, un posicionamiento y igual al seno de ese ángulo e ir incrementando el ángulo (o de crementándolo) en cada fotograma. Tanto al seno como al coseno, que equivalen a un radiovector de valor 1, hay que multiplicarlos por un radio cualquiera para que el círculo sea visible:
Código PHP:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<div id="log">...</div>
<canvas width="500" height="500" id="pp" style="border:1px solid red" />
<script>
var ctx=document.getElementById('pp').getContext('2d');
var r=100;
ctx.strokeStyle = 'red';
ctx.beginPath();
ctx.moveTo(350, 250);
var ang=0,i,x,y;
i=setInterval(
function(){
if(ang>2*Math.PI){clearInterval(i);return;}
ang+=.01;
document.getElementById('log').innerHTML=ang;
x=(Math.cos(ang)*r)+(250);
y=(Math.sin(ang)*r)+(250);
ctx.lineTo(x, y); ctx.stroke();
},
30
);
ctx.closePath();
</script>
</body>
</html>
Si en lugar de multiplicar seno y coseno por el mismo valor los multiplicamos por valores diferentes, en lugar de círculos obtenemos elipses (o círculos en perspectiva si hablamos de 3D):
Código PHP:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<div id="log">...</div>
<canvas width="500" height="500" id="pp" style="border:1px solid red" />
<script>
var ctx=document.getElementById('pp').getContext('2d');
var r=100;
ctx.strokeStyle = 'red';
ctx.beginPath();
ctx.moveTo(350, 250);
var ang=0,i,x,y;
i=setInterval(
function(){
if(ang>2*Math.PI){clearInterval(i);return;}
ang+=.01;
document.getElementById('log').innerHTML=ang;
x=(Math.cos(ang)*r)+(250);
y=(Math.sin(ang)*r/2)+(250);//ELIPSE
ctx.lineTo(x, y); ctx.stroke();
},
30
);
ctx.closePath();
</script>
</body>
</html>
Un link muy bueno:
http://www.sargentoweb.com/as2/?doc=2