Dibujar triángulo en Canvas usando JavaScript

Dejar un comentario / HTML, javascript, web / Por

Hoy vamos a ver cómo dibujar un triángulo en un canvas de HTML5 a través de JavaScript usando los métodos moveTo, lineTo y closePath.

Aunque no hay un método llamado triangle o algo por el estilo, podemos dibujar cualquier tipo de triángulo uniendo algunas líneas.

Estilos de triángulo

Para cambiar el color del borde podemos cambiar la propiedad strokeStyle, y para el color de relleno la propiedad fillStyle.

El grosor de la línea se define estableciendo la propiedad lineWidth.

Cómo dibujar el triángulo sobre el canvas

Comenzamos moviéndonos con moveTo, y después simplemente usamos lineTo para dibujar líneas hacia otro punto.

La última línea no la dibujamos nosotros, simplemente llamamos a closePath para que el trazo sea cerrado por nosotros.

Código de triángulo

Veamos a continuación el código:

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Triángulo con canvas</title>
</head>

<body>
	<h1>Triángulo con canvas y JavaScript</h1>
	<a href="//parzibyte.me/blog">By Parzibyte</a>
	<br>
	<canvas id="canvas"></canvas>
	<script src="script.js"></script>
  </body>
</html>
/**
 * Ejercicios con Canvas y JavaScript: dibujo de figuras geométricas
 * 
 * https://parzibyte.me/blog
 */
const ALTURA_CANVAS = 200,
	ANCHURA_CANVAS = 400;

// Obtener el elemento del DOM
const canvas = document.querySelector("#canvas");
canvas.width = ANCHURA_CANVAS;
canvas.height = ALTURA_CANVAS;
// Del canvas, obtener el contexto para poder dibujar
const contexto = canvas.getContext("2d");
// Estilo de dibujo
// Grosor de línea
contexto.lineWidth = 5;
// Color de línea
contexto.strokeStyle = "#212121";
// Color de relleno
contexto.fillStyle = "#AB47BC";
// Nos movemos a la esquina superior izquierda
contexto.moveTo(5, 5);
// Dibujamos una línea hacia abajo
contexto.lineTo(5, 100);
// Desde el fin de esa línea, 
// dibujamos una hacia la derecha
contexto.lineTo(150, 100);
// Y dejamos que JS cierre nuestro dibujo
contexto.closePath();
// Hacemos que se dibuje
contexto.stroke();
// Lo rellenamos
contexto.fill();

Fíjate en los comentarios, los he puesto para explicar a fondo el código.

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *