¿Cómo hacer una estrella en canvas con JavaScript y html?
Estoy incursionando en la programación en html y JavaScript. En el momento quise hacer unos dibujos de líneas en cavas me puse como reto realizar una estrella. Pero no se que me salio mal, ya que me salen unas líneas demás, creo que la ecuación esta más formulada. Quisiera por favor me ayuden a encontrar como mejorar mi código.
Código.
dibujo.html
<! DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Dibujando con Canvas</title>
</head>
<body>
<h1>Dibujo en canvas</h1>
<p>
Cuantas líneas quieres
<input type="text" id="texto_lineas" />
<input type="button" value="A darle!" id="botoncito" />
</p>
<canvas width="300" height="300" id="dibujito"></canvas>
<p>Así queda tu dibujo</p>
<script src="dibujo.js"></script>
</body>
</html>
dibujo.js
ar texto = document.getElementById("texto_lineas");
var boton = document.getElementById("botoncito");
boton.addEventListener("click", dibujoPorClick);
var d = document.getElementById("dibujito");
var ancho = d.width;
var lienzo = d.getContext("2d");
function dibujarLinea(color,xinicial,yinicial,xfinal,yfinal)
{
lienzo.beginPath();
lienzo.strokeStyle = color;
lienzo.moveTo(xinicial, yinicial);
lienzo.lineTo(xfinal, yfinal);
lienzo.stroke();
lienzo.closePath();
}
function dibujoPorClick()
{
var lineas = parseInt(texto.value);
var l = 0;
var xi1, xi2, yi1, yi2, xf1, xf2, yf1, yf2;
var colorcito = "Black"
var espacio = ancho / lineas;
for(l = 0; l < lineas; l++)
{
xi1 = espacio * l;
xi2 = 160 + (espacio * l);
yi1 = espacio * l;
yi2 = 150 + (espacio * l);
xf1 = 140 - (espacio * l);
xf2 = 160 + (espacio * l);
yf1 = 160 + (espacio * l);
yf2 = 300 - (espacio * l);
dibujarLinea(colorcito, 150, yi1, xf1, 150);
dibujarLinea(colorcito, 150, yi1, xf2, 150);
dibujarLinea(colorcito, xi1, 150, 150, yf1);
dibujarLinea(colorcito, xi2, 150, 150, yf2);
console.log("lineas" + l)
}
dibujarLinea(colorcito, 1, 1, 1, 299);
dibujarLinea(colorcito, 1, 299, 299, 299);
dibujarLinea(colorcito, 1, 1, 299, 1);
DibujarLinea(colorcito, 299, 1, 299, 299);
}
Resultados.
