⇪

Dibujar estrellas

facebook-svg gplus-svg twitter-svg

Las estrellas que dibujaremos a continuación son polígonos estrellados, y pueden trazarse "sin levantar el lápiz".
Para dibujar el trazado utilizaremos la misma técnica que hemos utilizado para dibujar polígonos regulares, con una sola diferencia: suponiendo que queremos dibujar una estrella de 5 puntas, después de calcular la posición de estas, uniremos los puntos de dos en dos ( paso = 2 ): 1 con 3, 3 con 5, 5 con 2, 2 con 4 y 4 con 1.

Para dibujar estrellas podemos utilizar tanto el elemento <polygon>, como el elemento <polyline>

Elemento ejemplo Descripción
<polygon> <polygon points = "220,10 300,210 220,250 140,210" style="fill: #6ab150; stroke: #003300; stroke-width: 3" /> Dibuja un polígono
<polyline> <polyline points = "220,10 300,210 220,250 140,210" style= "fill: #6ab150; stroke: #003300; stroke-width: 3" /> Dibuja una polilínea

No te olvides: siempre que sea posible, pon el JavaScript dentro del <body>, justo antes de su cierre: los estilos arriba, los scripts al fondo.


var cx = 125;
var cy = 100;
var r = 75;
var lados = 5;
var paso = 2;

function points(cx, cy, r, lados, paso){
var a = 360/lados;
var points= (cx+r)+","+cy+" ";

		for(var i=1;i <= lados;i++){
				var aRad=  ((Math.PI / 180) * (a*i))*paso;
				Xp = cx+r * Math.cos(aRad);
				Yp = cy+r * Math.sin(aRad);
				points += Xp+","+Yp+" ";
		}	
return points	
}
var estrella = document.getElementById("estrella");	
estrella.setAttribute("points", points(cx, cy, r, lados,paso));

Galería de estrellas

Solo con cambiar el valor del número de lados y el paso podemos conseguir cualquiera de estos estrellas. Para unas estrellas "llenas" de color borre el atributo fill-rule="evenodd" de <polygon>.