Dibujar un triángulo en HTML5

15/Feb/2021 HTML5 , , Deja un comentario

Dentro de las múltiples capacidades que nos ofrece en Canvas en HTML5 hoy vamos a ver cómo podemos dibujar un triángulo en HTML5 dentro del Canvas.

Para ello lo primero que haremos será crear un elemento canvas dentro de nuestra página web

<canvas height="400px" width="500px" id="micanvas">
    Su navegador no soporta en elemento CANVAS
</canvas>

En este caso le hemos dado unas medidas de 400×500, más que suficientes para poder insertar dentro el triángulo. Un punto importante es que le hemos dato un id que se llama micanvas y que nos servirá para poder instanciarlo.

Ahora vamos a instanciar el canvas haciendo una referencia a él mediante el identificador.

var canvasElement = document.getElementById("micanvas");
var context = canvasElement.getContext("2d");

Una vez obtenido el acceso al canvas mediante el método .getElementById() vamos a obtener el contexto con .getContext(). Y es que será sobre el contexto dónde dibujemos nuestro triángulo.

Aunque en HTML5 hay una serie de métodos que nos permiten crear rectángulos y formas circulares mediante arcos no existe una forma de crear directamente un triángulo. Es por ello que tendremos que ir moviendo la pluma de punto a punto para poder trazar el triángulo.

El primer paso será iniciar el path de dibujo mediante .beginPath():

context.beginPath();

Ahora nos moveremos al punto inicial. Para ello nos apoyamos en el método .moveTo() al cual le pasamos las coordenadas de la posición en el canvas. Nos vamos a ir a la posición 100,100.

context.beginPath();
context.moveTo(100, 100);

Lo siguiente será trazar una línea hasta el punto 100,300 y de ahí otra línea hasta el punto 300,300. Las líneas las trazamos con el método .lineTo() que recibe las coordenadas como parámetros.

context.beginPath();
context.moveTo(100, 100);
context.lineTo(100, 300);
context.lineTo(300, 300);

No hace falta el trazar la última línea hasta el punto inicial ya que si cerramos el path con .closePath() se cierra automáticamente una línea hasta el punto inicial.

context.beginPath();
context.moveTo(100, 100);
context.lineTo(100, 300);
context.lineTo(300, 300);
context.closePath();

Con esto ya tenemos trazado el triángulo. Pero todavía nos queda indicar dos cosas, por un lado el color y estilo de la línea de trazado y el color de relleno del triángulo.

Las propiedades .lineWidth y .strokeStyle nos sirven para detallar el ancho y el color respectivamente. Además deberemos de invocar al método .stroke() para que pinte la línea.

context.lineWidth = 10;
context.strokeStyle = '#666666';
context.stroke();

Para la parte del relleno del triángulo tenemos la propiedad .fillStyle que se ejecutará cuando invoquemos al método .fill().

context.fillStyle = "#FFCC00";
context.fill();

Con esta secuencia ya habremos conseguido dibujar un triángulo en HTML5 dentro de un canvas.

Vídeos sobre HTML5


¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.