Invierte en tu educación con el precio especial
Antes:$249
Paga en 4 cuotas sin intereses
Termina en:
10d
20h
51m
16s
Html
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><title>Dibujando2</title></head><body><h1>Dibujo: </h1><inputtype="text"id=cajaTxt><inputtype="button"value="Enviar"id="cajaBtn"><br><br><canvasid="dib"width="300"height="300"></canvas><p>----------------</p><scriptsrc="dibujo.js"></script></body></html>JS
ar text=document.getElementById('cajaTxt'); //POdemos manejar con estos metodos los inputs que importamos del html mediante su id
var button=document.getElementById('cajaBtn');
var d = document.getElementById("dib"); //metodo del obj document que nos trae un elemento por id
var lienzo = d.getContext("2d"); //getContext permite obtener el area para dibujar, metodo del obj canvas d, se aplica el contexto 2d//Vertice InfDer con while/*while(lineasContador < lineasTotales){
yIni=10*lineasContador;
xFi=10*(lineasContador+1)
dibujoLinea(lineaColor,0,yIni,xFi,300);
lineasContador+=3; // si editamos el numero la separacion de las lineas cambia
}*/
dibujoBordes("black");button.addEventListener("click",dibujoPorClick);
function dibujoPorClick(){
creaDibujo("red",5); //cambiando el segundo parametro del 1 al 5 se grafican diferentes posiciones del algoritmo
}
function creaDibujo(color,esquinaCompleta){
var lineasTotales = parseInt(text.value) ;
var lineasContador = 0;
var lineaColor=color;
var esquinaCompleta;
var anchoCanvas=d.width;
var espacioEntreLineas= anchoCanvas/lineasTotales;
var xIni,yIni;
var xFi,yFi;if (esquinaCompleta==1) {
for (lineasContador; lineasContador < lineasTotales; lineasContador++) {
xIni=0;
yIni=espacioEntreLineas*lineasContador;
xFi=espacioEntreLineas*(lineasContador+1);
yFi=anchoCanvas;
dibujoLinea(lineaColor,xIni,yIni,xFi,yFi);
}
}elseif (esquinaCompleta==2) {
for (lineasContador; lineasContador < lineasTotales; lineasContador++) {
xIni=anchoCanvas-(lineasContador*espacioEntreLineas);
yIni=0;
xFi=0;
yFi=espacioEntreLineas*(lineasContador);
dibujoLinea(lineaColor,xIni,yIni,xFi,yFi);
}
} elseif (esquinaCompleta==3) {
for (lineasContador; lineasContador < lineasTotales; lineasContador++) {
xIni=espacioEntreLineas*(lineasContador);
yIni=0;
xFi=anchoCanvas;
yFi=espacioEntreLineas*(lineasContador+1);
dibujoLinea(lineaColor,xIni,yIni,xFi,yFi);
}
}elseif (esquinaCompleta==4) {
for (lineasContador; lineasContador < lineasTotales; lineasContador++) {
xIni=espacioEntreLineas*(lineasContador);
yIni=anchoCanvas;
xFi=anchoCanvas;
yFi=anchoCanvas-(lineasContador*espacioEntreLineas);
dibujoLinea(lineaColor,xIni,yIni,xFi,yFi);
}
}elseif (esquinaCompleta==5) {
creaDibujo(color,1);
lineasContador=0;
creaDibujo(color,2);
lineasContador=0;
creaDibujo(color,3);
lineasContador=0;
creaDibujo(color,4);
}
}
function dibujoBordes(lineaColor){
dibujoLinea(lineaColor,0,0,300,0);
dibujoLinea(lineaColor,0,0,0,300);
dibujoLinea(lineaColor,0,300,300,300);
dibujoLinea(lineaColor,300,0,300,300);
}
function dibujoLinea(color,xInicial,yInicial,xFinal,yFinal){
lienzo.beginPath(); //inicio del trazo
lienzo.strokeStyle = color; //Estilo del trazo
lienzo.moveTo(xInicial,yInicial); //Pto de inicio
lienzo.lineTo(xFinal,yFinal) //Pto de fin
lienzo.stroke(); //Trazo en si
lienzo.closePath(); //Fin del trazo
}
