Entrada destacada

Como usar enums en Android, kotlin

el
0

Cómo dibujar arcos y círculos en Canvas

el

Ejemplo de círculo
Los arcos y círculos son variantes de los paths, como se verá mas adelante. Empecemos creando la estructura del archivo html.

Index.html
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Arcos y Círculos</title>
    <style>
    canvas{
      border: 1px solid black;
        margin-bottom: 10px;
      }

      #cantidad{
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <canvas id="miCanvas" width="320" height="340"></canvas>
    <br>
    <label>Mueve para dividir: </label>
    <span id="cantidad">4</span>
    <br>
    <input type="range" id="myRange" value="4" min="2" max="20">
    <script src="DibujaArcos.js"></script>
  </body>
</html>
En las líneas 6 a 15 se agregan estilos css para el canvas y el input-range, el input de tipo range lo utilizaremos para dividir un circulo en partes iguales. En la línea 18 creamos el canvas con el Id "miCanvas" que será con el que accedamos desde javascript en el archivo DibujaArcos.js.

Si abrimos el archivo Index.html nos debería aparecer lo siguiente.

Bien, ahora vamos a dibujar un arco dentro del canvas, lo primero que necesitamos es obtener su contexto.

DibujaArcos.js
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
var canvas = document.getElementById("miCanvas");
var contexto = canvas.getContext("2d");
var x = 150;
var y = 160;
var radio = 100;

function radians(grados){
  return grados * Math.PI / 180;
}

contexto.fillStyle = "#00B249";
contexto.strokeStyle = "#FFEC24";
contexto.lineWidth = 4;
contexto.beginPath();
contexto.arc(x, y, radio, radians(90), radians(270));
contexto.fill();
contexto.stroke();
contexto.closePath();
El código anterior dibujará un arco con centro en (150, 160) con un radio de 100 empezando en ángulo 90° y terminando en 270°. La función arc recibe los parámetros de ángulo en radianes pero para que sea un cómodo lo convertimos a grados con la función definida en las líneas 7 a 9.

Como puedes darte cuenta para dibujar un círculo lo único que debemos hacer es dibujar un arco con una ángulo inicial de 0° y un ángulo final e 360°.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
var canvas = document.getElementById("miCanvas");
var contexto = canvas.getContext("2d");

function radians(grados){
  return grados * Math.PI / 180;
}

function dibujaCirculo(x, y, radio){
  contexto.beginPath();
  contexto.arc(x, y, radio, radians(0), radians(360));
  contexto.fill();
  contexto.stroke();
  contexto.closePath();
}

contexto.fillStyle = "#00B249";
contexto.strokeStyle = "#FFEC24";
contexto.lineWidth = 4;
dibujaCirculo(130, 140, 120)
Hemos creado otra función con la que dibujaremos siempre un círculo lo único que cambiará será su posición y radio.

Antes habíamos mencionado que los arcos son una variante de los paths, entonces podemos definir moveTo() para trazar una línea desde ese punto y continuar con el arco como se muestra a continuación.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
var canvas = document.getElementById("miCanvas");
var contexto = canvas.getContext("2d");

function radians(grados){
  return grados * Math.PI / 180;
}

function dibujaCirculo(x, y, radio){
  contexto.beginPath();
  contexto.arc(x, y, radio, radians(0), radians(360));
  contexto.fill();
  contexto.stroke();
  contexto.closePath();
}

contexto.fillStyle = "#00B249";
contexto.strokeStyle = "#FFEC24";
contexto.lineWidth = 4;
dibujaCirculo(30, 60, 20)

contexto.beginPath();
contexto.moveTo(60, 60);
contexto.arc(140, 60, 40, radians(0), radians(160), 1);
contexto.fill();
contexto.stroke();
contexto.closePath();


Ahora vemos un ejemplo mas complejo en el que se subdivide un círculo en partes iguales según el número que se seleccione.


Ve el Pen Divide Círculo por Jesus Tepec (@JesusTepec) en CodePen.



Anterior Siguiente

Comentarios

Publicar un comentario