Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Dibujando2</title>
</head>
<body>
<h1>Dibujo: </h1>
<input type="text" id=cajaTxt>
<input type="button" value="Enviar" id="cajaBtn">
<br><br>
<canvas id="dib" width="300" height="300"></canvas>
<p>----------------</p>
<script src="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);
}
}else if (esquinaCompleta==2) {
for (lineasContador; lineasContador < lineasTotales; lineasContador++) {
xIni=anchoCanvas-(lineasContador*espacioEntreLineas);
yIni=0;
xFi=0;
yFi=espacioEntreLineas*(lineasContador);
dibujoLinea(lineaColor,xIni,yIni,xFi,yFi);
}
} else if (esquinaCompleta==3) {
for (lineasContador; lineasContador < lineasTotales; lineasContador++) {
xIni=espacioEntreLineas*(lineasContador);
yIni=0;
xFi=anchoCanvas;
yFi=espacioEntreLineas*(lineasContador+1);
dibujoLinea(lineaColor,xIni,yIni,xFi,yFi);
}
}else if (esquinaCompleta==4) {
for (lineasContador; lineasContador < lineasTotales; lineasContador++) {
xIni=espacioEntreLineas*(lineasContador);
yIni=anchoCanvas;
xFi=anchoCanvas;
yFi=anchoCanvas-(lineasContador*espacioEntreLineas);
dibujoLinea(lineaColor,xIni,yIni,xFi,yFi);
}
}else if (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
}
Curso Básico de Programación
0 Comentarios
para escribir tu comentario
