Dentro de las múltiples capacidades que nos ofrece en Canvas en HTML5 hoy vamos a ver cómo podemos dibujar un triángulo en HTML5 dentro del Canvas.
Para ello lo primero que haremos será crear un elemento canvas dentro de nuestra página web
<canvas height="400px" width="500px" id="micanvas">
Su navegador no soporta en elemento CANVAS
</canvas>
En este caso le hemos dado unas medidas de 400×500, más que suficientes para poder insertar dentro el triángulo. Un punto importante es que le hemos dato un id que se llama micanvas y que nos servirá para poder instanciarlo.
Ahora vamos a instanciar el canvas haciendo una referencia a él mediante el identificador.
var canvasElement = document.getElementById("micanvas");
var context = canvasElement.getContext("2d");
Una vez obtenido el acceso al canvas mediante el método .getElementById() vamos a obtener el contexto con .getContext(). Y es que será sobre el contexto dónde dibujemos nuestro triángulo.
Aunque en HTML5 hay una serie de métodos que nos permiten crear rectángulos y formas circulares mediante arcos no existe una forma de crear directamente un triángulo. Es por ello que tendremos que ir moviendo la pluma de punto a punto para poder trazar el triángulo.
El primer paso será iniciar el path de dibujo mediante .beginPath():
context.beginPath();
Ahora nos moveremos al punto inicial. Para ello nos apoyamos en el método .moveTo() al cual le pasamos las coordenadas de la posición en el canvas. Nos vamos a ir a la posición 100,100.
context.beginPath(); context.moveTo(100, 100);
Lo siguiente será trazar una línea hasta el punto 100,300 y de ahí otra línea hasta el punto 300,300. Las líneas las trazamos con el método .lineTo() que recibe las coordenadas como parámetros.
context.beginPath(); context.moveTo(100, 100); context.lineTo(100, 300); context.lineTo(300, 300);
No hace falta el trazar la última línea hasta el punto inicial ya que si cerramos el path con .closePath() se cierra automáticamente una línea hasta el punto inicial.
context.beginPath(); context.moveTo(100, 100); context.lineTo(100, 300); context.lineTo(300, 300); context.closePath();
Con esto ya tenemos trazado el triángulo. Pero todavía nos queda indicar dos cosas, por un lado el color y estilo de la línea de trazado y el color de relleno del triángulo.
Las propiedades .lineWidth y .strokeStyle nos sirven para detallar el ancho y el color respectivamente. Además deberemos de invocar al método .stroke() para que pinte la línea.
context.lineWidth = 10; context.strokeStyle = '#666666'; context.stroke();
Para la parte del relleno del triángulo tenemos la propiedad .fillStyle que se ejecutará cuando invoquemos al método .fill().
context.fillStyle = "#FFCC00"; context.fill();
Con esta secuencia ya habremos conseguido dibujar un triángulo en HTML5 dentro de un canvas.
