Michael Stevens Cárdenas Urbano
PreguntaHola! Utilice lo aprendido para crear una imagen bonita circular hecha de solo líneas , pero en la página cada que escribo el número de líneas y le doy al botón se escriben unas líneas sobre otras sin que se borre la selección anterior y la única solución es recargar la pagina, como lo arreglo ? Gracias ;D !
Michael Stevens Cárdenas Urbano
ESTE ES MI CODIGO :D (SOLO CAMBIE EL .JS) var texto = document.getElementById("texto_lineas"); var boton = document.getElementById("botoncito"); boton.addEventListener("click", dibujoPorClick );
var d = document.getElementById("dibujito"); var lienzo = d.getContext("2d"); var ancho = d.width;
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 xi, yi, xf, yf; var colorcito = "black"; var espacio = ancho / lineas
for(l = 0; l < lineas; l++) { xi = espacio * l; yi = espacio * l; xf = espacio * (l + 1); yf = ancho - (l * espacio); dibujarLinea("green", yf, ancho, 0, yf); dibujarLinea("blue", yi, 0, ancho, xf); dibujarLinea("yellow", xi, 0, 0, yf); dibujarLinea("red", ancho, yi, yf, ancho); dibujarLinea("silver", (ancho / 2), 0, (ancho / 2), ancho); dibujarLinea("silver", 0, (ancho / 2), ancho, (ancho / 2)); dibujarLinea("gold", 0, 0, ancho, ancho); dibujarLinea("gold", 0, ancho, ancho, 0); console.log("linea " + l) } dibujarLinea(colorcito, 1, 1, 1, (ancho - 1)); dibujarLinea(colorcito, (ancho - 1), 1, 1, 1); dibujarLinea(colorcito, 1, (ancho - 1), (ancho - 1), (ancho - 1)); dibujarLinea(colorcito, ancho, (ancho - 1), (ancho - 1), 1); }
