w3.unpo<code>todo

Polígonos regulares

Un polígono regular es un polígono en el que todos los lados tienen la misma longitud y todos los ángulos interiores tienen el mismo valor. Los polígonos regulares se pueden inscribir perfectamente en una circunferencia.

Para dibujar un polígono regular, ( o cualquier otro trazado ) necesitamos definir algunas propiedades del contexto

ctx.fillStyle = "#6ab150";
ctx.strokeStyle = "black";
ctx.lineWidth = 3;

Todos los polígonos regulares se pueden inscribir en una circunferencia. Por lo tanto definimos la posición del centro ( X,Y ) y el radio ( R ) de este círculo:

var X = canvas.width/2;
var Y = canvas.height / 2;
var R = 100;

Y lo más importante: definimos el número de lados ( L ) del polígono.

var L = 5;

Todos los ángulos centrales de un polígono regular son iguales entre si ( 72° ) y su valor en radianes ( rad ) puede obtenerse a partir del número de lados L del polígono:

var rad= 2*Math.PI / L

Para dibujar el trazado utilizamos un bucle for ( for loop ), donde con cada paso del bucle dibujamos un lado del polígono.

for( var i = 0; i < L; i++ ){
	x = X + R * Math.cos( rad*i );
	y = Y + R * Math.sin( rad*i );
	contexto.lineTo(x, y);
}

No se olvide que para calcular las coordenadas de un punto en la circunferencia de un círculo utilizamos las siguientes fórmulas:
var x = centroX + radio * Math.cos(a);
var y = centroY + radio * Math.sin(a);

Su navegador no soporta canvas :( 

	var canvas = document.getElementById("lienzo");
		if (canvas && canvas.getContext) {
		var contexto = canvas.getContext("2d");
			if (contexto) {
					contexto.fillStyle = "#6ab150";
					contexto.strokeStyle = "black";
					contexto.lineWidth = 3;
																	
					var X = canvas.width/2;
					var Y = canvas.height/2;
					var R = 100;
					// el número de lados del polígono
					var L = 5;
					// si L == 5 el ángulo es de 2π/6 o sea 60°
					var rad = (2*Math.PI)/L;	
					// dibuja el trazado 
					contexto.beginPath();
							for( var i = 0; i < L; i++ ){
							x = X + R * Math.cos( rad*i );
							y = Y + R * Math.sin( rad*i );
							contexto.lineTo(x, y);
							}
					contexto.closePath();
					contexto.fill();
					contexto.stroke();
			}
		}

Arreglar desperfectos

El pentágono ha salido muy bien, pero no estaría nada mal poder girarlo alrededor de su centro. Para esto tenemos que utilizar otros dos métodos del contexto: translate() y rotate().

El método rotate() gira los trazados alrededor del origen del contexto ( x=0, y=0 ). Para girar un trazado alrededor de su centro:
- lo construimos en el origen ( x=0, y=0 )
- lo giramos con rotate()
- lo trasladamos con translate() en el punto deseado, por ejemplo en el centro del <canvas>.

Veamos como queda.

Su navegador no soporta canvas :( 

var canvas1 = document.getElementById("lienzo1");
		if (canvas1 && canvas1.getContext) {
		var ctx = canvas1.getContext("2d");
			if (ctx) {
					ctx.fillStyle = "#6ab150";
					ctx.strokeStyle = "black";
					ctx.lineWidth = 3;
																	
					var X = 0;
					var Y = 0;
					var R = 100;
																	
					var L = 5;
					// si L == 6 el ángulo es de 2π/6 o sea 60°
					var rad = (2*Math.PI)/L;
					// traslada el contexto en el centro del canvas 
					// para poder girar el contexto alrededor del centro 
					ctx.translate(canvas1.width/2, canvas1.height/2);
					//gira el contexto unos 270deg
					ctx.rotate(3*Math.PI/2);
					// dibuja el trazado 
					ctx.beginPath();
							for(i = 0; i < L; i++ ){
							x = X + R * Math.cos( rad*i );
							y = Y + R * Math.sin( rad*i );
							ctx.lineTo(x, y);
							}
					ctx.closePath();
					ctx.fill();
					ctx.stroke();
			}
		}

Galería de polígonos regulares

Solo con cambiar el valor del número de lados del trazado ( la variable L ) podemos conseguir cualquiera de estos polígonos regulares.