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.
