Entrada destacada

Como usar enums en Android, kotlin

el
0

Crear polígonos regulares con n lados en canvas HTML5

el
En una entrada anterior Figuras irregulares vimos cómo crear figuras utilizando múltiples líneas o paths pero esas figuras podían tener cualquier forma. Ahora veremos como utilizar los paths para crear figuras con lados iguales empezando con  triángulos, cuadrados, pentágonos hasta figuras con n lados que empezaran a verse como círculos.


En el cuerpo del html solo ponemos la etiqueta canvas.

<canvas id="gameArea" height="520"width="640"></canvas>

Siempre recordar enlazar el código javascript si lo ponemos en un archivo externo.
Empecemos creando el contexto de canvas, que es el objeto con el realizaremos los dibujos.

var canvas = document.getElementById("gameArea");
var contexto = canvas.getContext("2d");

El truco para hacer las figuras es dividir en partes iguales una circunferencia y así obtener cada uno de los puntos donde se conectaran las líneas.
Supongamos que necesitamos una figura con 4 lados entonces debemos dividir 360 / 4 esto nos dará un resultado de 90 ahora solo falta obtener la coordenadas cartesianas de cada punto cada 90 grados.

Empecemos encontrando el punto de inicio por ejemplo en 0 grados.

  var x = radio * Math.cos(Math.PI / 180 * 0) + centro[0];
  var y = radio * Math.sin(Math.PI / 180 * 0) + centro[1];

Utilizando seno y coseno podemos pasar de coordenadas polares a cartesianas. La formula anterior determina cada punto (x, y) en el angulo especificado tomando en cuanta que el centro de la circunferencia no se encuentra en el origen.

Estos primeros puntos nos servirán para especificar el inicio del path.

  contexto.beginPath();
  contexto.lineJoin = "round";
  contexto.lineWidth = 1.5;
  contexto.moveTo(x, y);

Recordemos que con beginPath() estamos especificando el inicio de una ruta, lineJoin lo utilizamos para especificar la forma de las uniones de líneas y lineWidth para definir el grosor de la líneas.

Una vez que hemos definido el punto inicial de la ruta, con ayuda de un ciclo for para obtener los siguientes puntos de la ruta alrededor de la circunferencia.

  for (i = 1; i < 360; i += 360 / numeroLados) {
    x = radio * Math.cos(Math.PI / 180 * i) + centro[0];
    y = radio * Math.sin(Math.PI / 180 * i) + centro[1];
    contexto.lineTo(x, y);
  }

Finalmente cerramos la ruta y dibujamos la líneas.

  contexto.closePath();
  contexto.stroke();

El código javascript completo 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
var canvas = document.getElementById("gameArea");
var contexto = canvas.getContext("2d");

function dibujaPoligono(centro, radio, numeroLados, fill) {
  var x = radio * Math.cos(Math.PI / 180 * 0) + centro[0];
  var y = radio * Math.sin(Math.PI / 180 * 0) + centro[1];
  contexto.beginPath();
  contexto.lineJoin = "round";
  contexto.lineWidth = 1.5;
  contexto.moveTo(x, y);
  for (i = 1; i < 360; i += 360 / numeroLados) {
    x = radio * Math.cos(Math.PI / 180 * i) + centro[0];
    y = radio * Math.sin(Math.PI / 180 * i) + centro[1];
    contexto.lineTo(x, y);
    contexto.lineTo(centro[0], centro[1]);
    contexto.lineTo(x, y);
  }  
  contexto.closePath();
  if (fill) contexto.fill();
  contexto.stroke();
}

contexto.strokeStyle = "purple";
contexto.fillStyle = "green";
dibujaPoligono([100,110], 70, 5, 1);

Las líneas 15 y 16 que se han agregado son para trazar lineas desde los vértices al centro de la figura.

La función dibujaPoligono() recibe el centro de la figura como un arreglo de dos elementos [x, y], el radio de la figura, el número de lados requeridos y con el parámetro final indicamos si la figura se dibujará con relleno o no.


Ver el Pen Polígonos Canvas por Jesus Tepec (@JesusTepec) en CodePen.


En la sección de Etiquetas podrás encontrar más entradas sobre Canvas.

Comenta tus dudas en la sección de comentarios



Anterior Siguiente

Comentarios

Publicar un comentario