Seguimos avanzando con los ejemplos de gráficos con canvas y hoy vamos a ver cómo crear un polígono en canvas HTML5. Y es que aunque no existe un método que nos dibuje un polígono si que podemos crearlo mediante un path, moviendo las líneas yendo a las coordenadas de sus vértices.
Crear el Canvas
Así que manos a la obra. Lo primero será crear el elemento canvas dentro de nuestra página web.
<h1>Crear polígonos</h1>
<canvas height="600px" width="1000px" id="micanvas">
Su navegador no soporta en elemento CANVAS
</canvas>
Y obtener su contexto mediante Javascript y los métodos .getDocumentbyId() y ..getContext().
var canvas = document.getElementById("micanvas");
var ctx = canvas.getContext("2d");
Coordenadas de los vértices del polígono
Ahora lo que tenemos que ver es cómo representar las coordenadas del polígono. Para ello vamos a utilizar una matriz donde la primera posición serán las coordenadas x y el segundo elemento serán las coordenadas y.
De esta forma la siguiente matriz:
var poligono = [[3,3,9],[3,9,3]];
Irá a las coordenadas (3,3) (3,9) y (9,3). Hay que tener en cuenta que el último punto del polígono se unirá con el inicial para poder cerrar el polígono.
Crear un polígono en Canvas
Una vez que tenemos las coordenadas pasamos a crear el path en el cual irmos yendo de coordenada en coordenada. Pero lo primero será crear el path mediante .beginPath() y nos moveremos a la primera coordenada mediante .moveTo().
ctx.beginPath(); ctx.moveTo(coords[0][0], coords[1][0]);
Ahora iremos yendo a cada una de las coordenadas trazando una línea con el método .lineTo(). Para ello recorremos la matriz
for (x=1;x<coords[0].length;x++)
ctx.lineTo(coords[0][x], coords[1][x]);
Una vez terminado cerramos el path mediante el método .closePath() y forzamos el pintado de la línea mediante el método stroke().
ctx.closePath(); ctx.lineWidth = 1; ctx.strokeStyle = "#FFCC00"; ctx.stroke();
Vemos que las propiedades .lineWidth y .strokeStyle nos sirven para dar estilo a la línea del polígono.
Si lo que queremos es rellenar el color del polígono tendremos que configurarlo mediante la propiedad .fillStyle e invocar al método .fill(). De esta manera el código que nos dibuja el polígono nos quedaría de la siguiente forma.
ctx.beginPath();
ctx.moveTo(coords[0][0], coords[1][0]);
for (x=1;x<coords[0].length;x++)
ctx.lineTo(coords[0][x], coords[1][x]);
ctx.closePath();
ctx.lineWidth = 1;
ctx.strokeStyle = "#FFCC00";
ctx.stroke();
ctx.fillStyle = "#FFCC00";
ctx.fill();
De esta manera ya habríamos conseguido crear un polígono en Canvas HTML5.
