¡Reencuéntrate con la tecnología en Platzi Day! Accede a miles de cursos por 72 horas. Una sorpresa te espera 😎

Regístrate

Comienza en:

03D

12H

29M

00S

2

Canvas 2 , mas funciones y un poco de magia (codigo comentado)

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
}	
Escribe tu comentario
+ 2