Dibujar un hexágono
Un hexágono regular es un polígono con 6 lados iguales y 6 ángulos iguales (120°).
Para construir un hexágono trazaremos un circulo imaginario con el radio R y el centro en un punto (X,Y) que en nuestro caso este punto coincide con el centro del <canvas>.
A continuación tenemos que encontrar 6 puntos equidistantes situados en la circunferencia. Estos puntos están situados a 60° uno de otro. Si unimos estos puntos conseguimos un hexágono.
Para calcular las coordenadas de un punto en la circunferencia de un círculo utilizaremos las siguientes fórmulas:
var x = X + R * Math.cos(a); var y = Y + R * Math.sin(a);
Donde
- X e Y son las coordenadas del centro del círculo;
- R es el radio del círculo, y
- a es el ángulo entre el punto 0π y este punto. No hay que olvidar que en el <canvas> tenemos que utilizar radianes. Sesenta grados en radianes son:
var rad = (Math.PI / 180) * 60;
Como que los 6 puntos son equidistantes podemos utilizar un bucle for ( for loop ) para trazar el hexágono.
ctx.beginPath();
for( var i = 0; i<6; i++ ){
x = X + R * Math.cos(rad*i);
y = Y + R * Math.sin(rad*i);
ctx.lineTo(x, y);
}ceramos el trazado y rellenamos:
ctx.closePath();
ctx.fill();
var canvas = document.getElementById("lienzo");
if (canvas && canvas.getContext) {
var ctx = canvas.getContext("2d");
if (ctx) {var R = 100;
var X = canvas.width/2;
var Y = canvas.height/2;
ctx.fillStyle = "#6ab150";
// un angulo de 60deg.
var rad = ( Math.PI / 180 ) * 60;
ctx.beginPath();
for( var i = 0; i<6; i++ ){
x = X + R * Math.cos( rad*i );
y = Y + R * Math.sin( rad*i );
ctx.lineTo(x, y);
}
ctx.closePath();
ctx.fill();
}
}