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:

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

Puedes probar y ver el resultado en este enlace.


Estoy disponible para trabajar en tu proyecto o realizar tu tarea pendiente, no dudes en ponerte en contacto conmigo.
Si el post fue de tu agrado muestra tu apoyo compartiéndolo, suscribiéndote al blog, siguiéndome o realizando una donación.

Suscribir por correo

Ingresa tu correo y recibirás mis últimas entradas sobre programación, open source, bases de datos y todo lo relacionado con informática

Únete a otros 3,194 suscriptores


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/

0 Comentarios

Deja un comentario

Marcador de posición del avatar

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

A %d blogueros les gusta esto: