Dibujar estrellas

Las estrellas que dibujaremos a continuación son polígonos estrellados, y pueden trazarse "sin levantar el lápiz".

Para dibujar una estrella, ( o cualquier otro trazado ) necesitamos definir algunas propiedades de <canvas>

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

Las estrellas, como los demás polígonos regulares, se pueden inscribir en una circunferencia. Por lo tanto tenemos que definir 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: definiremos el número de lados L de la estrella y el paso.

var L = 5;
var paso = 2

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 y del paso del polígono:

var estrella = L / paso
var rad= 2*Math.PI / estrella

Para dibujar el trazado utilizaremos un bucle for ( for loop ), donde con cada paso del bucle dibujaremos un lado de la estrella.


	var canvas = document.getElementById("lienzo");
		if (canvas && canvas.getContext) {
		var ctx = canvas.getContext("2d");
			if (ctx) {
					ctx.fillStyle = "#6ab150";
					ctx.lineWidth = 6;
					var X = canvas.width / 2;
					var Y = canvas.height / 2;
					var R = 100;
																	
					var L = 5;
					var paso = 2	
																
					var estrella= L / paso
					var rad = (2*Math.PI) / estrella;
																	
					ctx.beginPath();
							for( var 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.stroke();
					ctx.fill();
			}
		}

Arreglar desperfectos

La estrella ha salido muy bien, pero no estaría nada mal poder girarla alrededor de su centro. Para esto tenemos que utilizar dos otros métodos del <canvas>: translate() y rotate(). Como que trasladaremos el contexto en el centro del <canvas> tendremos que redefinir las variables X e Y.

var X = 0;
var Y = 0;

Veamos como queda.


var canvas1 = document.getElementById("lienzo1");
		if (canvas1 && canvas1.getContext) {
		var ctx = canvas1.getContext("2d");
			if (ctx) {
					ctx.fillStyle ="#6ab150";
					ctx.lineWidth = 6;
					var X = 0;
					var Y = 0;
					var R = 100;
					
					var L = 5;
					var paso = 2;
					
					var estrella= L / paso;
					var rad = (2*Math.PI) / estrella;
															
					// traslada el contexto en el centro del canvas  
					ctx.translate(canvas1.width / 2, canvas1.height / 2);
					//gira el contexto unos 270º
					ctx.rotate(3*Math.PI/2);
					// dibuja el trazado 
					ctx.beginPath();
							for( var 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.stroke();
					ctx.fill();
			}
		}

Galería de estrellas

Solo con cambiar el valor del número de lados del trazado ( la variable L ) y el paso ( la variable paso ) podemos conseguir cualquiera de estas estrellas.

w3.unpo<code>todo