Como vimos anteriormente con la etiqueta canvas y la ayuda de JavaScript podemos crear imágenes de todo tipo y en este articulo veremos las funciones para dibujar círculos con canvas.

Métodos para dibujar Círculos

  • arc(x, y, radio, Oi, Of, boolean) : vemos este método con los parámetros X e Y son los ejes del punto medio de origen del circulo, el radio que indica el circulo, Oi y Of los trazos del circulo, y el booleano indica que será rellenado o lo opuesto.
  • closePath() : método que cierra la ruta que empezó con beginPath().
  • fill() : método que dibuja el circulo.

Veamos un ejemplo, del dibujo de un circulo con carita, osea dos ojos y una boca.

Ahora veamos el código del ejemplo 

<!DOCTYPE html>
<html lang="en">
<head>
<title>Mi Titulo</title>
<meta charset="UTF-8">
<script type="text/javascript">

// obtengo referencia del canvas por su ID
var canvas = document.getElementById('miCanvas');
// creo un contexto a travez de la referencia del canvas con un metodo
var ctx = canvas.getContext("2d");

// metodo para rellenar el color un grafico creado
ctx.fillStyle='green';

// metodo para el comienzo de nuevo trazo
ctx.beginPath();
// dibujamos el circulo
ctx.arc(100, 100, 50, 0, Math.PI*2, true);
// cerramos los trazos
ctx.closePath();
// dibujamos y rellenamos el grafico
ctx.fill();

// creamos una boca
// metodo para rellenar el color un grafico creado
ctx.fillStyle='white';
// metodo para el comienzo de nuevo trazo
ctx.beginPath();
// dibujamos el circulo
ctx.arc(100, 110, 20, 0, Math.PI, false);
// cerramos los trazos
ctx.closePath();
// dibujamos y rellenamos el grafico
ctx.fill();

// creamos el ojo izquierdo
ctx.fillStyle='white';
// método para el comienzo de nuevo trazo
ctx.beginPath();
// dibujamos el circulo
ctx.arc(80, 90, 12, 0, Math.PI, true);
// cerramos los trazos
ctx.closePath();
// dibujamos y rellenamos el grafico
ctx.fill();

// creamos el ojo derecho
ctx.fillStyle='white';
// metodo para el comienzo de nuevo trazo
ctx.beginPath();
// dibujamos el circulo
ctx.arc(120, 90, 12, 0, Math.PI, true);
// cerramos los trazos
ctx.closePath();
// dibujamos y rellenamos el grafico
ctx.fill();

</script>
</head>
<body>
<canvas id="miCanvas" width="200" height="200" style="border: 1px solid blue">

</canvas>

</body>
</html>