javascript

Dibujar triángulo en Canvas usando JavaScript

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.

parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/