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:

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

Puedes probar y ver el resultado en este enlace.

Deja un comentario

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