En la página
platzi.com disponemos de un curso gratuito de programación básica.
El curso nos ha gustado, está bastante bien. Aquí vamos a incluir algunos de los códigos que se ven en el curso, y también algunas soluciones a los ejercicios propuestos, así como variantes propias.
ATOM
Nos recomiendan como editor de código usar
ATOM.
Ruta
Podemos ver la ruta o url de la página en la que estamos.
var ruta = window.location;
console.log(ruta);
document.write("Estás en: " + ruta);
Canvas
Primero veamos cómo hace un par de líneas, una horizontal y otra vertical en el lienzo.
Código del fichero dibujo0.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Dibujando con canvas</title>
</head>
<body>
<h1>Dibujo en canvas</h1>
<canvas width="300" height="300" id="dibujito"></canvas>
<p>Asi queda tu dibujo.</p>
<script src="dibujo0.js"></script>
</body>
</html>
Código del fichero dibujo0.js
var d = document.getElementById("dibujito");
var lienzo = d.getContext("2d");
dibujarLinea("blue", 1,1,1,299); //dibuja una lína vertical
dibujarLinea("blue", 1,299,299,299); //dibuja una línea horizontal
function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal)
{
lienzo.beginPath();
lienzo.strokeStyle = color;
lienzo.moveTo(xinicial, yinicial);
lienzo.lineTo(xfinal, yfinal);
lienzo.stroke();
lienzo.closePath();
}
El resultado visual es el siguiente.
Canvas con bucle
Ahora vamos a crear una malla haciendo líneas reiteradamente con la ayuda de un bucle FOR.
Código del fichero dibujo1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Dibujando con canvas</title>
</head>
<body>
<h1>Dibujo en canvas</h1>
<canvas width="300" height="300" id="dibujito"></canvas>
<p>Asi queda tu dibujo.</p>
<script src="dibujo1.js"></script>
</body>
</html>
Código del fichero dibujo1.js
var d = document.getElementById("dibujito");
var lienzo = d.getContext("2d");
var lineas=30;
var yi, xf;
var colorcito="blue";
for (l=0; l<lineas; l++)
{
yi=10*l;
xf=10*l+10;
dibujarLinea(colorcito,0,yi,xf,300);
}
dibujarLinea("blue", 1,1,1,299); //dibuja una lína vertical
dibujarLinea("blue", 1,299,299,299); //dibuja una línea horizontal
function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal)
{
lienzo.beginPath();
lienzo.strokeStyle = color;
lienzo.moveTo(xinicial, yinicial);
lienzo.lineTo(xfinal, yfinal);
lienzo.stroke();
lienzo.closePath();
}
El resultado visual es el siguiente.
Canvas con botón
Código del fichero dibujo2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Dibujando con canvas</title>
</head>
<body>
<h1>Dibujo en canvas</h1>
<p>
Cuantas lineas 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>Asi queda tu dibujo</p>
<script src="dibujo2.js"></script>
</body>
</html>
Código del fichero dibujo2.js
var 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 yi, xf;
var colorcito = "#FAA";
var espacio = ancho / lineas;
for(l = 0; l < lineas; l++)
{
yi = espacio * l;
xf = espacio * (l + 1);
dibujarLinea(colorcito, 0, yi, xf, 300);
console.log("Linea " + l);
}
dibujarLinea(colorcito, 1,1,1,299);
dibujarLinea(colorcito, 1,299,299,299);
}
El resultado visual para 50 líneas es el siguiente.
