Como dibujar arcos y círculos

Realmente canvas tiene dos métodos para dibujar arcos. el que se muestra aquí se usa a partir de:

  • el centro del arco,
  • el radio
  • los ángulos de inicio y de final.

Si este ángulo va de 0 a 360º tenemos una circunferencia. El ángulo se debe expresar en radianes (uf!!! matemáticas). Es fácil una circunferencia entera tiene 2*pi (el famoso 3.1416) radianes. O sea 360 grados son 2pi radianes y 180 son pi radianes y 90º son pi/2 radianes. El 0 corresponde a la horizontal y va aumentando en el sentido horario. O sea, 0º son las 3 del reloj, 0.5 Pi son las 6, Pi son las 9, 1.5*Pi son las 12 y 2·Pi vuelve a las 3 (la horizontal).

La otra forma de dibujar arcos la tienes en el apartado dedicado a las curvas Bézier. Lo explico allí por su parecido con este método de dibujo de curvas.

Vamos a dibujar una circunferencia y esta vez vamos a usar una linea gruesa.

<canvas width="600" height="300" id="mipanel"></canvas>

<script>

var miLienzo = document.getElementById("mipanel");

var lapiz = miLienzo.getContext("2d");

lapiz.beginPath();

lapiz.arc(300,150,80, 0.5*Math.PI, 1.5*Math.PI)

lapiz.stroke();

</script>

Como ves en primero creamos la linea y luego se dibuja con el método stroke().

 

Circulo relleno uniforme

Como recordarás del cole la circunferencia es una linea y el círculo es lo que hay dentro de la circunferencia. O sea un ciruclo es como una circunferencia rellena (que no me lea ningún matemático o le sangrarán los ojos). A difrencia de los rectángulos no existe una forma directa de dibujar un círculo: se crea la circunferencia, luego se rellena y finalmente se dibuja

<canvas width="600" height="300" id="mipanel"></canvas>

<script>

var miLienzo = document.getElementById("mipanel");

var lapiz = miLienzo.getContext("2d");

lapiz.beginPath();

lapiz.arc(300,150,80, 0, 2*Math.PI);

lapiz.fill();

lapiz.stroke();

</script>