Como dibujar cicunferencias
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 a 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>