Dibujar circunferencia sin usar "arc()"

IXtremeLT · #1 (**permalink**) 11/04/2012, 13:41

Hola que tal,

Me gustaria saber como dibujar una circunferencia sin usar el metodo arc() del contexto, es decir, dibujarlo por medio de lineas o puntos con el fin que se valla viendo como se va cerrando en un intervalo de tiempo.

Supongo que se tendra que usar algo del PI, Coseno y Seno pero estoy muy limitado para entender eso jeje.

Crei que restandole y sumandole al X y Y hasta llegar al centro mas o menos el radio, dependiendo del lado donde empieza dibujar, podria hacer un circulo, pero lo unico que logre fue hacer un romboide XD.

Gracias y saludos.

Panino5001 · #2 (**permalink**) 11/04/2012, 17:32

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

daPhyre · #3 (**permalink**) 13/04/2012, 14:08

Cita:

Iniciado por IXtremeLT

...con el fin que se valla viendo como se va cerrando en un intervalo de tiempo.

Si esto es lo que deseas, ¿No sería más fácil usar una variable que se sume hasta 360 con un setInterval, y usar esa variable para dibujar el arc()?

Panino5001 · #4 (**permalink**) 13/04/2012, 15:17

Cita:

Iniciado por daPhyre

Si esto es lo que deseas, ¿No sería más fácil usar una variable que se sume hasta 360 con un setInterval, y usar esa variable para dibujar el arc()?

Me pregunté lo mismo, pero como IXtremeLT andaba con ganas de aprender algo de Trigonometría.

Y de paso, con el link aprende sobre movimiento ondulatorio (como el de los famosos copos de nieve cayendo), un poco de falso 3d o puede seguir experimentando para hacer otras cosas divertidas:

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=0; 
    ctx.strokeStyle = 'red';   
      ctx.beginPath();   
      ctx.moveTo(250, 250);  
    var ang=0,i,x,y; 
    i=setInterval( 
                  function(){ 
                          if(r>300){clearInterval(i);return;} 
                          ang+=.01; 
                          r+=.1; 
                          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>

IXtremeLT · #5 (**permalink**) 17/04/2012, 23:10

Haha muchas gracias a ustedes =), es increible lo que puedes hacer sabiendo programacion y matematicas, ahora ya me imagino aplicando la fisica, de hecho ya he visto ejemplos increiblemente magnificos con html5, como una cortina en 3d que se mueve si la empujas como en la realidad y pelotas que rebotan de verdad jaja. Voy a ver ese link para entender mejor el funcionamiento del seno y coseno, es que siempre fui bien burro para echarle ganas cuando me dieron clases en la escuela pero ya tengo como casi 2 años que le ando dando caña a varias ciencias principalmente a la programacion web, ahora que entre a la Uni, si que le
echare ganas a las mates y fisica lo de programacion lo aprendo mas facil aqui en internet y con ustedes, graciad y hasta la proxima :D.