Artículos
HTML5

Dibujar un triángulo en HTML5

15/Feb/2021

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.

Código Fuente

Descárgate el código fuente de Dibujar un triángulo en HTML5
Y si te ha gustado nuestro código fuente puedes regalarnos una estrella Star

Vídeos sobre HTML5

Disfruta también de nuestros artículos sobre HTML5 en formato vídeo. Aprovecha y suscribete a nuestro canal.

Test HTML5

¿Te atreves a probar tus habilidades y conocimiento en HTML5 con nuestro test?

Test HTML5
Suscribir
Notificar de
guest
0 Comentarios
Recientes
Anteriores Más votados
Opiniones integradas
Ver todos los comentarios