Platzi
Platzi

¡Invierte en ti y celebremos! Adquiere un plan Expert o Expert+ a precio especial.

Antes: $349
$259
Currency
Antes: $349
Ahorras: $90
COMIENZA AHORA
Termina en: 17D : 11H : 17M : 1S

Debes tener cuenta en Platzi

Para ver esta clase abierta debes iniciar sesión

Eventos y Formularios en HTML y JavaScript16/36

Los eventos son funciones que suceden cuando algo ocurre,  sucesos cómo un click, pulsar una tecla, colocar el mouse sobre un botón, etc.

 

Creemos un programa que reciba la cantidad de líneas con las que queremos crear nuestra imagen.

 

Recuerda:

 

Cuando queremos enviar información a un servidor podemos usar un formularios

 

En JavaScript puedes agregar un manejador de eventos con element.addEventListener('event', function)

En el minuto 19, Freddy habla sobre como los ingenieros tardamos meses en aprender a programar codigo así de complejo iniciando desde cero en la universidad, “ESTOY TOTALMENTE DE ACUERDO” a tal grado de frustración se llega a veces que acabas odiando la programación y crees que esto no será lo tuyo, Gracias Freddy por regresar mis ánimos.

http://codepen.io/emilianoduran/pen/qajJQW

me quedo asi :

Captura1.PNG

🐱‍💻 Experimentando con los conocimientos adquiridos.
pacman.png

Una pequeña reflexion de mis últimos errores. 

  • Hasta ahora el codigo no me ha funcionado porque he escrito un ID y cuando quería hacer referencia del mismo en javascript escribi algo mal.
  • Porque me ha faltado colocar el símbolo (=) en alguna parte.
  • El punto y coma.
  • No coloque la mayúscula en una parte de en un atributo de variable.
  • etc.


Si los que saben pasan la mayor parte de su tiempo leyendo el código para corregir errores o entender como continuar que sera de los que estamos comenzando. 


Les deseo mucho ánimo y paciencia. Y recuerden que casi en el 100% de los casos si algo no les esta saliendo bien no es culpa del editor de texto, la computadora o el navegador. Revisa el codigo y si ya lo revisaste entonces revisalo de nuevo++.

Tengo 73 años, soy licenciado en Finanzas de Empresas, jubilado. Siempre tuve una habilidad innata para crear sistemas. En los 70’s desarrollé, desde la nada, un sistema de Control y Facturación de almacenes, cuando casi no existía algo así, por lo menos en Argentina. Luego desarrollé un sistema para Compras en una enorme empresa de gastronomía y varios sistemas más; en todos ellos tuve la enorme colaboración de un Jovencito muy capaz que programaba como los dioses. Cuando me separé de él dejé de desarrollar sistemas. Ahora, 40 años después, estoy estudiando con muchísimo interés Programación para poder volver a Crear sistemas. Con este curso de Platzi estoy viendo que a pesar de que pasaron 40 años lo voy a lograr. SI SE PUEDE.

Si no quieren tener que recargar la página cada vez que van a presionar el botón para que se borren las lineas del canvas pueden utilizar la siguiente sentencia al iniciar la función dibujoPorClick():

lienzo.clearRect(0,0,300,300);

Ejemplo:

function dibujoPorClick(){
  lienzo.clearRect(0,0,300,300);
  var linea=parseInt(t.value);
  var espacio=ancho/linea;
  var l=0;
  do{
    dibujarLinea("gray", 300,0+l*espacio,290-l*espacio,300);
    l++;
  }while (l<linea);
}```

Datos importantes del video:

  1. Recuerden que SIEMPRE lo que se optiene del campo de texto es un String
    2.Si van a hacer uso de una función en un evento no lleva los Paréntesis
    3.Con el Id acceden a los objetos HTML desde JavaScript
    4.Las funciones pueden o no recibir parámetros
    5.Con el <br/> Dan un salto de linea al texto en HTML
    6.Nunca olviden poner el punto y coma(😉

Manito arriba si al igual que yo aprendes Haciendo!
PD: Gracias Freddy!

Después de muchísimas horas de trabajo.

Dibujando estrellas.png

HTML

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Dibujando con canvas</title>
  </head>
  <body>
    <h1>Dibujo en canvas</h1>
    <p>¿Cuántas líneas quieres?
      <br />
      <br />
    <label>Número de líneas </label> <input type="text"maxlength="2"onkeypress="return keyPressValidation(event)"id="texto_lineas" />
    <br />
    <br />
    <label>Número de iteraciones </label><input type="text"maxlength="2"onkeypress="return keyPressValidation(event)"id="iterar" />
    <br />
    <br />
    <label>Pixeles min 300 máx 1000 </label><input type="range"min="300"max="1000"value="300"list="range_datalist"id="rango"/>
    <br />
    <br />
    <input type="button" value="Dibujar" id="boton"/>
    <input type="button" value="Recargar" id="refresh"/>
    <datalist id="range_datalist">
      <option value="300">300</option>
      <option value="400">400</option>
      <option value="500">500</option>
      <option value="600">600</option>
      <option value="700">700</option>
      <option value="800">800</option>
      <option value="900">900</option>
      <option value="1000">1000</option>
    </datalist>
    </p>
    <canvas id="dibujito" width="300" height="300"></canvas>
    <p>Así queda tu dibujo</p>
  <input type="text"placeholder="Total Iteraciones"readonly"true" id="resultado" />
  </body>
  <script type="text/javascript" src="dibujito.js">
  </script>
</html>

JAVASCRIPT

// Autor: ernanvr
// 21/04/2020

var texto = document.getElementById("texto_lineas")
var boton = document.getElementById("boton");
var height_width = document.getElementById("rango")
var rango_minimo = height_width.value;
var iteracion = document.getElementById("iterar")
var recarga = document.getElementById("refresh")
var contador = document.getElementById("resultado")

recarga.addEventListener("click", reinicio);//para refrescar página
boton.addEventListener("click", porClick);//para ejecutar el loop por click
texto.addEventListener("paste", onpaste);//para evitar que se pegue texto
rango.addEventListener("change", onchange);//para actualizar página cuando hay cambio de tamaño de lienzo
iteracion.addEventListener("paste", onpaste);


// Contador de iteraciones
 var acumulado = 0;




var d = document.getElementById("dibujito");
var lienzo = d.getContext("2d");
var ancho_lienzo = d.width;
var alto_lienzo = d.height;

// dibujando los marcos
  dibujarLinea("grey",1,1,1,ancho_lienzo-1)
  dibujarLinea("grey",1,ancho_lienzo-1,ancho_lienzo-1,ancho_lienzo-1)
  dibujarLinea("grey",1,1,ancho_lienzo-1,1)
  dibujarLinea("grey",ancho_lienzo-1,1,ancho_lienzo-1,ancho_lienzo-1)

// Loop para interar de acuerdo al box con el número de iteraciones
function porClick(){
  acumulado = parseInt(iteracion.value) + acumulado;
  if (iteracion== 0) {
    return false
  } else {
  for (var i = 0; i < iteracion.value; i++) {
      CrearAleatorio()

  }
  contador.value = "Iteraciones acumuladas " + acumulado;
  contador.disabled = true;
}
}

function dibujarLinea(color, x_inicial, y_inicial, x_final, y_final) {
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.moveTo(x_inicial,y_inicial)
  lienzo.lineTo(x_final,y_final)
  lienzo.stroke();
  lienzo.closePath();
}

// Función para crear las estrellas
function CrearAleatorio () {
  document.getElementById("rango").disabled = true;
  var lineas = parseInt(texto.value);
  var espacio = (ancho_lienzo/(2*height_width.value/rango_minimo)/lineas);// ecuación de la variable espacio debe ajustarse a los distintos áreas
  var l = 0;
  var yi, xf;
  var xi, yf;
  var size = Math.floor((Math.random()*3)+1);
  var positionx = randomBetween(-250*height_width.value/rango_minimo,250*height_width.value/rango_minimo);
  var positiony = randomBetween(-250*height_width.value/rango_minimo,250*height_width.value/rango_minimo);
  var color_estrella;
  colorAleatorio();
  // Loop para crear las estrellas en los 4 cuadrantes que la componen
    do {
      yi = espacio * l ;
      xf = (alto_lienzo/2)-(espacio * (l + 1));
      xi = alto_lienzo/2;
      yf = alto_lienzo/2;
      dibujarLinea(color_aleatorio,(xi/size)+positionx,(yi/size)+positiony,(xf/size)+positionx,(yf/size)+positiony);
      yi = espacio * l ;
      xf = (alto_lienzo/2)+(espacio * (l + 1));
      xi = alto_lienzo/2;
      yf = alto_lienzo/2;
      dibujarLinea(color_aleatorio,(xi/size)+positionx,(yi/size)+positiony,(xf/size)+positionx,(yf/size)+positiony);
      yi = (alto_lienzo)-(espacio * l );
      xf = (alto_lienzo/2)-(espacio * (l + 1));
      xi = alto_lienzo/2;
      yf = alto_lienzo/2;
      dibujarLinea(color_aleatorio,(xi/size)+positionx,(yi/size)+positiony,(xf/size)+positionx,(yf/size)+positiony);
      yi = (alto_lienzo)-(espacio * l );
      xf = (alto_lienzo/2)+(espacio * (l + 1));
      xi = alto_lienzo/2;
      yf = alto_lienzo/2;
      dibujarLinea(color_aleatorio,(xi/size)+positionx,(yi/size)+positiony,(xf/size)+positionx,(yf/size)+positiony);
      l++;
    } while (l < lineas);
}

// Función para validar que solo se ingresen números. Raro que el asterisco
// no funciona en la expresión regular, tiene que usarse el signo +
function keyPressValidation(e) {
  var key = e.KeyCode || e.which;
  var teclado = String.fromCharCode(key);
  var prueba = /^[0-9]+/.test(teclado)

  if (prueba == false) {
    return false
  }
}

// Función para evitar que se utilice la opción pegar en la input box
function onpaste(e) {
e.preventDefault()
}

function onchange(e){
  d.width = height_width.value;
  d.height = height_width.value;
  ancho_lienzo = height_width.value;
  dibujarLinea("grey",1,1,1,ancho_lienzo-1);
  dibujarLinea("grey",1,ancho_lienzo-1,ancho_lienzo-1,ancho_lienzo-1);
  dibujarLinea("grey",1,1,ancho_lienzo-1,1);
  dibujarLinea("grey",ancho_lienzo-1,1,ancho_lienzo-1,ancho_lienzo-1);
  alert ("Longitud ha cambiado a "+height_width.value);
}

// Funcion para generar numeros aleatorios
function randomBetween(min, max) {
    if (min < 0) {
        return Math.floor(min + Math.random() * (Math.abs(min)+max));
    }else {
        return Math.floor( min + Math.random() * max);
    }
}

// Funcion para escoger colores aleatoriamente
function colorAleatorio (){
    var hexadecimal = ["green","blue","pink","red","blue","yellow"];
    color_aleatorio = hexadecimal[randomBetween(0,6)];
    return color_aleatorio
}

// Función del botón reinicio
function  reinicio () {
  location.reload()
}

Mi aporte
dibujo completo.jpg

++ SUPER RESUMEN DE ESTE VÍDEO Y DE LO APRENDIDO HASTA AHORA:++

Con utf-8 puedes poner caracteres raros. Con <p> puedes añadir párrafos, con <h1> títulos.En html da igual los espacios que pongas en el código, se separa mediante <br>. Con <input> puedes colocar diferentes elementos del formulario, como texto y button. El id es el nombre en javascript de la etiqueta en html, es lo que se pone en html para desde javascript acceder a ese código. value es el valor del boton ( si no sale una bolita sin nada).

Canvas es el lugar abierto donde podemos dibujar con JavaScript. Su ancho y alto lo determinamos nosotros. Sabemos cargar scripts externos. Con JavaScript obtenemos un elemento de html con .getElementById, y lo podemos guardar en una variable. Y esto es un objeto. Estos objetos en ocasiones pueden tener eventos, como el evento click, que disparan una función que declaras donde quieras. Esto se hace mediante un activador de eventos que se llama .addEventListener(). También podemos escribir en 2d o 3d, y se define por el contexto del canvas y lo gurdamos en un lienzo.

Hay funciones que reciben parámetros que definimos cuales y cuantos son.A su vez, hay funciones que no reciben parámetros y se disparan en según que casos. La forma de obtener el valor de un formulario (atributo) es con .value

“Botoncito es el nombre que tiene en html” , boton es la variable en javascript en la que estoy haciendo todo esto. Es buena práctica no llamarlo todo igual. También, es importante ser consistente en el nombre de las variables para cuando otros programadores trabajen contigo. Ejemplo: llamar variables txt_lineas txt_circulos … no llamarlos txt_lineas y textocirculos, porque será más complicado de entender.

En JavaScript puedes agregar un manejador de eventos con element.addEventListener(‘event’, function) , al poner la función, no la pones con paréntesis ,porque no quieres que se ejecute en ese momento, sino solo cuando el botón “quiera” , por eso es que la nombras y la dejas ahí como en espera.

Los programadores no piensan en un problema grande, sino que lo desglosan en problemas pequeños. En este caso, con el numero de lineas en la caja de texto:

  1. Al darle click, que pase algo.

  2. ¿Cómo obtener el numero de lineas y como lo meto en una variable?

  3. ¿Cómo hago para que esto se dibuje solo cuando le doy click después de obtener el número?
    4.¿Cómo hago para que las líneas sean las del número?

  4. Resuelto con alert

  5. Mediante el atributo texto.value de la caja de texto (no puedes poner texto directamente pues esto incluye toda la caja del html), y transformando el string en un número mediante ParseInt

  6. Cortando y pegando todo el código a partir de declarar las líneas hasta dibujar las líneas del borde dentro de la función dibujoPorClick. ÁMBITO

  7. Cambiando el valor de la variable líneas de 30 a la variable xxx, o directamente eliminando esta y poniendo su contenido. var líneas = parseInt(texto.value). Aun así, esto no es suficiente y se va a quedar limitado porque nosotros diseñamos el canvas como 300 / 30 (lineas), pero este numero 30 cambia según lo que pone el usuario, así que en vez de multiplicar 10*l , multiplicamos (300/lineas) * l. Y así, estaría resuelto.Pero, si quieren hacerlo bien, declaren la variable ancho = d.width // al ver su valor (300) , pueden declarar otra variable dentro de dibujoPorClick llamada espacio = (ancho / lineas), y sustituir aquellos lugares donde pusimos 10 por espacio.

CONCEPTO DE ÁMBITO

Las variables que declaramos dentro de una función solo se mantienen con vida dentro de las llaves, si la declaramos dentro de la función en dibujoPorClick , esta variable nunca estará disponible en dibujarLinea

ESPECIAL MENCIÓN A : console.log(“”) , nuestro super poder que permite mandar mensajes de depuración a la consola del ordenador para poder ver como funciona el programa por dentro pero no afectar a la forma visual ni a lo que ve el usuario.

BUENAS PRÁCTICAS: Las etiquetas que se abren y no se cierran con otra como meta charset o input, normalmente es una buena práctica poner al final /> para indicar que se cierran.

Curvas.JPG

![](ahora con formulario.JPG

¡Hola a todos!

Aqui muestro como hice yo el proyecto. Me puse a curiosear con CSS y esto fue lo que ocurrio…

html
nombre: dibujo.html

<code>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Dibujando con Canvas</title>
  <style>
    body
    {
      /*Color del fondo del documento*/
      background: #f1ffc0;
    }
    .texto
    {
      /*Alineacion del texto*/
      text-align: center;

      /*Color del fondo*/
      background-color: rgba(243, 156, 243, 0.623);

      /*Tamaño del borde*/
      border-radius: 15px 7px 15px 7px;

      /*Color del borde*/
      border-color: blueviolet;

      padding: 5px 10px 5px;

      
    }

    .boton
    {
      /*alineacion*/
      text-align: center;

      /*color del fondo*/
      background-color: rgb(25, 208, 240);

      /*tamaño de los bordes*/
      border-radius: 15px 7px 15px 7px;

      /*color de los bordes*/
      border-color: rgb(5, 204, 240);

      padding: 10px 5px 10px 4px;
      margin: 2px;
    }

    canvas
    {
     border-radius: 150px; 
     background: #ee9feacc;
     position:relative;
     left:250px;
     top: -180px;
    }

    .texto_lienzo
    {
      color: #000000;
      position:relative; 
      top: -300px;
      left: 50px;
    }
      h1
      {
        width: 6cm;
        text-align: center;
        color: #f1410bea;
        border-radius: 10px;
        background: #be7edfa4;
        position: relative;
        left: 1cm;
      }
    .bot_tex
    {
      position: relative;
      left: 20px;
      margin-left: 5px;
      margin-top: 40px;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  
  <h1>Dibujando en Canvas</h1>
  <p class="bot_tex">
    ¿Cuantas lineas quieres? <br />
    <input type="text" class="texto"id="texto_lineas" />
    <input type="button" class="boton" value="A darle!" id="botoncito"/>
  </p>
  <canvas width="300" height="300" id="dibujito"></canvas>  
  <i class="texto_lienzo" id="icita"> ¡Este es tu lienzo!</i>
  
  <script src="dibujo.js"></script>
</body>
</html>

scrpit
nombre: dibujo.js

<code>
var boton = document.getElementById(“botoncito”);
var texto= document.getElementById(“texto_lineas”);
boton.addEventListener(“click”, dibujoPorCLick);

var d = document.getElementById(“dibujito”);
var ancho = d.width;
var lienzo = d.getContext(“2d”);

function dibujarLinea(color, x_inical, y_inicial, x_final, y_final)
{
lienzo.beginPath();
lienzo.strokeStyle = color;
lienzo.moveTo(x_inical, y_inicial);
lienzo.lineTo(x_final, y_final);
lienzo.stroke();
lienzo.closePath();
}

function dibujoPorCLick()
{

var lineas = parseInt(texto.value);
var l = 0;
var yi, xf, yf, xi;
var nxf, nyf;
var colorcito = “#ec1a1a80”;
var espacio = ancho / lineas;

for(l = 0; l < lineas; l++)
{
xf = espacio * (l + 1);
yi = espacio * l;
xi = espacio * l;
yf = espacio * (l + 1);
nxf = 300 - xi;
nyf = 300 - yf;

dibujarLinea(colorcito , 0, yi, xf, 300);
dibujarLinea(colorcito , xi, 0, 300, yf);
dibujarLinea(colorcito , xi, 300, 300, nyf);
dibujarLinea(colorcito , nxf, 0, 0, yf);

console.log("Lineas " + l)

}

dibujarLinea(colorcito, 1, 1, 1, 299);
dibujarLinea(colorcito, 1, 299, 299, 299);
dibujarLinea(colorcito, 299, 299, 299, 1);
dibujarLinea(colorcito, 299, 1, 1, 1);
}

Mi aporte:
Formularios.PNG

Mi aporte:
Un programa que puede modificar cantidad de lineas, jugar entre diferentes figuras y diferentes tamaños.Para cada uno de las figuras hice una función donde la llame en otra función que sería la que se llama en el addlistener.

1.PNG
2.PNG
3.PNG
4.PNG
5.PNG
6.PNG
7.PNG
8.PNG

nota1.pngnota2.png

<!DOCTYPE html>
<html>
   <head>
    <meta charset="utf-8" />
    <title>Dibujo libre con canvas</title>
    <style>
     body
     {
       background-color:grey;
       color:white;
       font-family: Helvetica;
     }
    </style>
   </head>
   <body>
      <h1>. . . . . . . . . . . . EXPRESATE DIBUJANDO . . . . . . . . . . .</H1>
      <P>
        Para crear tu obra de arte, haz lo siguiente:
        1. Escribe o selecciona el número de lineas que quieres dibujar.
        2. selecciona el número que corresponda al color que deseas.
        3. Haz click en el boton "Dibujar".
        4. Repite el proceso cuantas veces quieras, jugando con la cantidad de lineas y colores.
        5. El boton "Borrar todo", dejara tu hoja totalmente limpia.<br> <br>
        <script>
             document.write("______1. amarillo___2. azul___3. rojo___4. morado___5. aguamarina___6. violeta___7. naranja___8. fucsia ");
        </script> <br><br><br>
       <script>
        document.write(". . . Superior izquierdo . . . . Superior derecho . . . . . . Inferior izquierdo . . . . . . . Inferior derecho . . . . . . . . . .Elige el color, y cambialo cuantas veses quieras");
       </script> <br>
        <input type="number" id ="supe_izq"/>
        <input type="number" id ="supe_der"/>
        <input type="number" id ="infe_izq"/>
        <input type="number" id ="infe_der"/>
      . . . . . . . . . . . . .   <input type="number" id ="todos_colores"/> <br><br><br>
      <script>
       document.write(". . . Centro izquierdo . . . . . . . Centro derecho . . . . . . Centro superior  . . . . . . . . Centro inferior");
      </script>
      . . . . . . . . . . . . .  <input type="button" value = "Dibujar " id ="botoncito" />
      . . . . . . . . <input type="button" value ="Borrar todo" id ="boton_borrar" /> <br>
        <input type="number" id ="centro_izq"/>
        <input type="number" id ="centro_der"/>
        <input type="number" id="centro_mediosup"/>
        <input type="number" id="centro_medioinf"/> <br><br><br>
        <canvas>   </canvas>
        <canvas width="500" height="500" id = "imagen_grande"> </canvas>
      <P> Aqui esta tu obra de arte </p>
      <script src="dibujolibremio.js"> </script>
      </p>
   </body>
</html>
var texto1 = document.getElementById("supe_izq");
var texto2 = document.getElementById("supe_der");
var texto3 = document.getElementById("infe_izq");
var texto4 = document.getElementById("infe_der");

var textoc1 =document.getElementById("centro_izq");
var textoc2 =document.getElementById("centro_der");
var textocm1 =document.getElementById("centro_mediosup");
var textocm2 =document.getElementById("centro_medioinf");

var color1=document.getElementById("todos_colores");

var boton = document.getElementById("botoncito");
var botonborrartodo= document.getElementById("boton_borrar");

botonborrartodo.addEventListener("click", borrarporclick);
boton.addEventListener("click", dibujoPorClick1);
boton.addEventListener("click", dibujoPorClick2);
boton.addEventListener("click", dibujoPorClick3);
boton.addEventListener("click", dibujoPorClick4);

boton.addEventListener("click", dibujoPorClickc1);
boton.addEventListener("click", dibujoPorClickc2);
boton.addEventListener("click",dibujoPorClickcm1);
boton.addEventListener("click",dibujoPorClickcm2);

var g = document.getElementById("imagen_grande");
var anchog = g.width;
var altog =g.height;
var hoja = g.getContext("2d");

function dibujarLineag(color, xinicial, yinicial, xfinal, yfinal,)
{
  hoja.beginPath();
  hoja.strokeStyle = color;
  hoja.moveTo(xinicial, yinicial);
  hoja.lineTo(xfinal, yfinal);
  hoja.stroke();
  hoja.closePath();
}

function borrarporclick()
{
texto1.value="";
texto2.value="";
texto3.value="";
texto4.value="";
textoc1.value="";
textoc2.value="";
textocm1.value="";
textocm2.value="";
hoja.clearRect(0,0,anchog,altog);
}

function colores()
{
  if (color1.value == 1)
  {
    color="yellow";
  }
  else if (color1.value == 2)
  {
    color="blue";
  }
  else if (color1.value == 3)
  {
    color="red";
  }
  else if (color1.value == 4)
  {
    color="purple";
  }
  else if (color1.value == 5)
  {
    color="aquamarine";
  }
  else if (color1.value == 6)
  {
    color="violet";
  }
  else if (color1.value == 7)
  {
    color="orange";
  }
  else
    {
      color="fuchsia";
    }
}

function dibujoPorClick1()
{
  var lineas = parseInt(texto1.value);
  var espacio = anchog/lineas;
  var xi,yf
  colores(color1);
  var colorcito= color;

for (l=0; l<lineas; l++)
{
  xi= anchog-(espacio * l);
  yf= espacio * (l+1);
  dibujarLineag(colorcito,xi,0,0,yf);
  console.log("linea " + 1);
  dibujarLineag(colorcito,1,anchog-1,1,1);
  dibujarLineag(colorcito,1,1,anchog-1,1);
  texto1.value="";
}
}

function dibujoPorClick2()
{
  var lineas = parseInt(texto2.value);
  var espacio = anchog/lineas;
  var anchito = anchog-espacio;
  var xi,yf
  colores(color1);
  var colorcito =color;

for (l=0; l<lineas; l++)
{
  xi= anchito-(espacio * l);
  yf= anchog-(espacio * l);
  dibujarLineag(colorcito,xi,0,anchog,yf);
  console.log("linea " + 1);
  dibujarLineag(colorcito,1,1,anchog-1,1);
  dibujarLineag(colorcito,anchog-1,1,anchog-1,anchog-1);
  texto2.value="";
}
}

function dibujoPorClick3()
{
  var lineas = parseInt(texto3.value);
  var espacio = anchog/lineas;
  var yi,xf
  colores(color1);
  var colorcito =color;

for (l=0; l<lineas; l++)
{
  yi= espacio * l;
  xf= espacio * (l+1);
  dibujarLineag(colorcito,0,yi,xf,anchog);
  console.log("linea " + 1);
  dibujarLineag(colorcito,1,1,1,anchog-1);
  dibujarLineag(colorcito,1,anchog-1,anchog-1,anchog-1);
  texto3.value="";
}
}

function dibujoPorClick4()
{
  var lineas = parseInt(texto4.value);
  var espacio = anchog/lineas;
  var anchito = anchog-espacio;
  var xi,yf
  colores(color1);
  var colorcito =color;

for (l=0; l<lineas; l++)
{
  xi= espacio * l;
  yf= anchito-(espacio * l);
  dibujarLineag(colorcito,xi,anchog,anchog,yf);
  console.log("linea " + 1);
  dibujarLineag(colorcito,1,anchog-1,anchog-1,anchog-1);
  dibujarLineag(colorcito,anchog-1,anchog-1,anchog-1,1);
  texto4.value="";
}
}

function dibujoPorClickc1()
{
  var lineas = parseInt(textoc1.value);
  var mitadancho = anchog/2;
  var mitadalto= altog/2;
  var espacioancho = mitadancho/lineas;
  var xf,yf;
  colores(color1);
  var colorcito =color;

for (l=0; l<lineas; l++)
{
  xf= mitadancho;
  yf= 125+(espacioancho*l);
  dibujarLineag(colorcito,125,mitadalto,xf,yf);
  console.log("linea " + 1);
  dibujarLineag(colorcito,mitadancho,125,125,mitadalto-1);
  dibujarLineag(colorcito,125,mitadalto-1,mitadancho-1,altog-125);
  textoc1.value="";
}
}

function dibujoPorClickc2()
{
  var lineas = parseInt(textoc2.value);
  var mitadancho = anchog/2;
  var mitadalto= altog/2;
  var espacioancho = mitadancho/lineas;
  var xf,yf
  colores(color1);
  var colorcito =color;

for (l=0; l<lineas; l++)
{
  xf= mitadancho;
  yf= 125+(espacioancho*l);
  dibujarLineag(colorcito,375,mitadalto,xf,yf);
  console.log("linea " + 1);
  dibujarLineag(colorcito,mitadancho,125,375,mitadalto-1);
  dibujarLineag(colorcito,375,mitadalto-1,mitadancho-1,altog-125);
  textoc2.value="";
}
}

function dibujoPorClickcm1()
{
var lineas = parseInt(textocm1.value);
var espacio = anchog/lineas;
var mitadancho = anchog/2;
var xf,yf
colores(color1);
var colorcito =color;

for (l=0; l<lineas; l++)
{
  xf=espacio* l;
  yf= altog;
  dibujarLineag(colorcito,mitadancho,0,xf,yf);
  console.log("linea " + 1);
  dibujarLineag(colorcito,1,anchog-1,anchog-1,anchog-1);
  textocm1.value="";
}
}

function dibujoPorClickcm2()
{
var lineas = parseInt(textocm2.value);
var espacio = anchog/lineas;
var mitadancho = anchog/2;
var xf,yf
colores(color1);
var colorcito =color;

for (l=0; l<lineas; l++)
{
  xf=espacio* l;
  yf= 0;
  dibujarLineag(colorcito,mitadancho,altog,xf,yf);
  console.log("linea " + 1);
  dibujarLineag(colorcito,1,1,anchog-1,1);
  textocm2.value="";
}
}

Hola!! Logré que el usuario elija la cantidad de lineas, los colores y tenga la opción de borrar el dibujo. Saludos
canvascode_1.png
canvascode_2.png
dibujo_canvas.png

buenas a todos.

les comparto mi código para hacer las lineas con la cantidad que quieran y con algunos colores dentro de una caja de selección.

espero me comenten que les parece. 

________________________________________________

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 <br />

      <input type= "text" id="texto_lineas"/>

      <select id = "colorsote">

        <option value="red"> rojo </option>

        <option value="blue"> azul </option>

        <option value="lawngreen"> verde </option>

        <option value="yellow"> amarillo </option>

        <option value="pink"> rosa </option>

        <option value="darkorchid"> violeta </option>

      </select>

      <input type= "button" value="a darle" id="botoncito"/>

    </p>

    <canvas width="500" height="500" id="dibujito"></canvas>

    <p>Asi queda tu dibujo</p>

    <script src="dibujo.js"></script>

  </body>

</html>

________________________________________________

JAvascript


var texto = document.getElementById("texto_lineas");

var boton = document.getElementById("botoncito");

var opciones_color = document.getElementById("colorsote")

var captura = "red";

opciones_color.addEventListener("change", function (){

  captura = opciones_color.value;


});

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();

}


dibujarLinea(captura, d.width - 1,1,d.width-1,d.height);

dibujarLinea(captura, 1,1,d.width - 1,1);

dibujarLinea(captura, 1,1,1,d.height);

dibujarLinea(captura, 1,d.height - 1,d.width - 1,d.height - 1);


function dibujoporClick()

{

  var lineas = parseInt(texto.value);

  var l = 0;

  var yi, xf;

  var xi, yf;

  var colorsito = captura;

  var espacio = ancho / lineas;


  d.width = d.width;

  d.height = d.height;


  dibujarLinea(captura, d.width - 1,1,d.width-1,d.height);

  dibujarLinea(captura, 1,1,d.width - 1,1);

  dibujarLinea(captura, 1,1,1,d.height);

  dibujarLinea(captura, 1,d.height - 1,d.width - 1,d.height - 1);


  for (l = 0; l < lineas; l++)

  {

    yi = espacio * l;

    xf = espacio * (l + 1);

    dibujarLinea(colorsito,0,yi,xf,d.height);

  }


}

 

Lo logré!!
Ejercicio platzi-dibujo.jpg
dibujo platzi.jpg

Por fín, después de mucho atormentar a mis neuronas.

Canvas.png

Y aquí está el código HTML

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <title>Drawing with Canvas</title>
    <link rel="stylesheet" href="">
    <script src="Canvas.js" type="text/javascript" charset="utf-8" async defer></script>
</head>

<body>
    <h1>This is a Canvas' design</h1>
    <form>
        Write a Canvas dimension in pixels
        <input id="txtDimension" class="inputBox" type="number" max="500">
        <br/>
        <br/> Indicates the number of lines?
        <input id="txtLines" class="inputBox" type="number" max="500">
        <br/>
        <br/> What color do you want?
        <input id="txtColor" class="inputBox" type="color">
        <br/>
        <br/> Choose the pattern
        <br/>
        <input id="radSquare" class="inputBox" type="radio" name="pattern" value="Square">Square
        <input id="radStar" class="inputBox" type="radio" name="pattern" value="Star">Star
        <br/>
        <br/>
        <input id="btnShow" class="actionButton" type="button" value="Show">
        <input id="btnClear" class="actionButton" type="reset" value="Clear">
    </form>
    <br/>
    <canvas id="myCanvas" width="300px" height="300px">The navigator does not support Canvas</canvas>
    <p>Voilà!</p>
</body>

</html>

Y el Javascript

var btnShowObject = document.getElementById("btnShow");
var btnClearObject = document.getElementById("btnClear");
btnShowObject.addEventListener("click", DrawCanvasDesign);
btnClearObject.addEventListener("click", ClearCanvas);

function DrawLine(canvasId, color, xStart, yStart, xFinal, yFinal) {
    var canvasElement = document.getElementById(canvasId);
    var canvasContext = canvasElement.getContext("2d");
    canvasContext.beginPath();
    canvasContext.strokeStyle = color;
    canvasContext.moveTo(xStart, yStart);
    canvasContext.lineTo(xFinal, yFinal);
    canvasContext.stroke();
    canvasContext.closePath();
}

function UpperLeft(dimension, lines, color, offset, adjust) {
    for (i = 0; i <= lines; i++) {
        var x = 0 + (i * offset);
        var y = lines * offset - i * offset;
        DrawLine("myCanvas", color, 0 + adjust, y + adjust, x + adjust, 0 + adjust);
    }
}

function UpperRight(dimension, lines, color, offset, adjust) {
    for (i = 0; i <= lines; i++) {
        var x = 0 + (i * offset);
        DrawLine("myCanvas", color, x, 0 + adjust, dimension, x + adjust);
    }
}

function BottomLeft(dimension, lines, color, offset, adjust) {
    for (i = 0; i <= lines; i++) {
        var x = 0 + (i * offset);
        DrawLine("myCanvas", color, 0 + adjust, x, x + adjust, dimension);
    }
}

function BottomRight(dimension, lines, color, offset, adjust) {
    for (i = 0; i <= lines; i++) {
        var x = 0 + (i * offset);
        var y = lines * offset - i * offset;
        DrawLine("myCanvas", color, x, dimension, dimension, y);
    }
}

function DrawCanvasDesign() {
    var txtDimensionObject = document.getElementById("txtDimension");
    var txtLinesObject = document.getElementById("txtLines");
    var txtColorObject = document.getElementById("txtColor");
    var radSquareObject = document.getElementById("radSquare");

    var desiredDimension = parseInt(txtDimensionObject.value);
    var desiredLines = parseInt(txtLinesObject.value);
    var desiredColor = txtColorObject.value;

    var offsetLine = desiredDimension / desiredLines;

    var canvasElement = document.getElementById("myCanvas");
    canvasElement.width = desiredDimension;
    canvasElement.height = desiredDimension;

    if (radSquareObject.checked == true) {
        var adjust = 0;
        UpperLeft(desiredDimension, desiredLines, desiredColor, offsetLine, adjust);
        UpperRight(desiredDimension, desiredLines, desiredColor, offsetLine, adjust);
        BottomLeft(desiredDimension, desiredLines, desiredColor, offsetLine, adjust);
        BottomRight(desiredDimension, desiredLines, desiredColor, offsetLine, adjust);
    } else {
        desiredDimension = desiredDimension / 2;
        offsetLine = offsetLine / 2;
        var adjust = desiredDimension
        UpperLeft(desiredDimension, desiredLines, desiredColor, offsetLine, adjust);
        UpperRight(desiredDimension, desiredLines, desiredColor, offsetLine, adjust);
        BottomLeft(desiredDimension, desiredLines, desiredColor, offsetLine, adjust);
        BottomRight(desiredDimension, desiredLines, desiredColor, offsetLine, adjust);
    }
}

function ClearCanvas() {
    var canvasElement = document.getElementById("myCanvas");
    var canvasContext = canvasElement.getContext("2d");
    var w = canvasElement.width;
    var h = canvasElement.height;
    canvasContext.clearRect(0, 0, w, h);
}
2.JPG
var texto = document.getElementById("texto_lineas");
var boton = document.getElementById("botoncito");
boton.addEventListener("click", dibujarporclick);

var d = document.getElementById("dibujito");
var lienzo = d.getContext("2d");

function dibujarLinea(rot)
{
  lienzo.beginPath();
  lienzo.strokeStyle = "blue";
  lienzo.ellipse(200, 200, 40, 170, rot, 0, 2 * Math.PI);
  lienzo.stroke();
  lienzo.closePath();
}

function dibujarporclick()
{
  var orb = parseInt(texto.value);
  for (rot = 0; rot <= Math.PI; rot = rot + (Math.PI / orb))
  {
    dibujarLinea(rot);
  }
}```

![](Captura de Pantalla 2019-09-29 a la(s) 5.54.37 p. m..png

platzi2.png

![](mi imagen en canvas.png

Aca hay un par mas de opciones para el atributo type=" " de la etiqueta <input/>:

"text" : define un texto de una sola linea.

"buttom" : define un botón clickeable.

"radio" : define un botón circular.

"checkbox" : define una checkbox.

"color" : nos brinda un selector de color.

 "date" : define una selector de fechas ( días, meses y años, sin hora).

"datetime-local": igual que el anterior pero nos permite brindar la hora.

"month": permite al usuario colocar solamente mes y año.

"email" : define un espacio para colocar un email.

"file": nos brinda un botón de seleccionar archivos ( para que el usuario pueda subir un archivo al sistema).

"image": define una imagen como un botón de enviar.

"number": cuadro en blanco donde solo se puede colocar números.

"password": define un campo de contraseña.

"range": define un selector deslizante de rango.

"url": define un campo para  colocar una URL.
Hola a todos!!! , Espero que estén excelente!! Me gusta e interesa demasiado aprender todos estos temas. Una de las formas que más me motivan es la competencia. Sergio, creador de Netux (StartUps de IOT para la Salud) me comentó que esa era la manera de desarrollar su habilidad. Competía con su socio para crear pequeños programas. Dicho esto, me gustaría compartir con personas que están aprendo cómo yo y podríamos ponernos de acuerdo para competir entre nosostros, interactuar y retroalimentar la experiencia de aprendizaje. ¿Quien se apuntaa??

El curso es muy interesante, pero para gente que no sabe nada de programación, es muy difícil. Llegué a la clase 15 y ya me perdí… creo que es demasiada información comprimida y no es fácil de asimilar.
Para gente que prefiere ir más lento, les recomiento otro curso básico gratis que está en Coursera.com. Se llama “programming foundations with JavaScript, Html y CSS” Dictado por la Universidad de Duke… más ordenada y paso a paso la información.
Gracias Freddy. Aprendí harto, pero se me hizo difícil seguirte. Es demasiada información.

Los programadores no piensan con problemas grandes y ¿oh! Qué vamos a hacer?

Piensan con problemas pequeñitos y cómo los desglosamos uno a uno!

Pero señor Freddy, sí es 2020 xD (Ya sé que lo grabó hace tiempo, ríanse de mi chiste

Mira, Freddy lo hice antes que tu en el video, y tengo 11 años¡ ![](Captura de Pantalla 2020-06-12 a la(s) 15.21.48.png

Mi aporte!
programita.PNG

Este es mi dibujo (la verdad cambie un poquito el código):
lienzo 1.jpg

Los nombres de los colores los encontré en esta dirección: https://www.w3schools.com/colors/colors_groups.asp

Código dibujaMallasEventuales.js:
var cajalineas = document.getElementById(“lacajalineas”);
var boton = document.getElementById(“elbotonlineas”);
var d = document.getElementById(“eldibujo”);
var ancho = d.width / 2;
var lienzo = d.getContext(“2d”);

function dibujaLinea(color, xIzquierda, yArriba, xDerecha, yAbajo) {
lienzo.beginPath();
lienzo.strokeStyle = color;
lienzo.moveTo (xIzquierda, yArriba);
lienzo.lineTo (xDerecha, yAbajo);
lienzo.stroke();
lienzo.closePath();
}

function clicBoton () {
lineas = parseInt(cajalineas.value);
delta = (ancho / lineas);

for (l = 0; l<ancho; l = l + delta) {
dibujaLinea(“springgreen”, l, ancho, ancho, ancho - delta - l);
dibujaLinea(“yellow”, ancho, ancho + delta + l, 2ancho - l, ancho);
dibujaLinea(“orangered”,l, ancho, ancho, ancho + delta + l);
dibujaLinea(“deepskyblue”, 2
ancho - l, ancho, ancho, ancho - delta - l);
console.log("Esta es la lína número " + l);
}
dibujaLinea(“springgreen”, ancho, 0, ancho, ancho);
dibujaLinea(“yellow”, ancho, ancho, ancho, 2ancho);
dibujaLinea(“orangered”, 0,ancho, ancho, ancho);
dibujaLinea(“deepskyblue”, ancho, ancho, 2
ancho,ancho);
//dibujaLinea(“azure”,ancho, 0, ancho, 2 * ancho );
//dibujaLinea(“azure”,0,ancho, 2 * ancho , ancho);
//alert(“Suave con ese mouse”); console.log(texto.value);
}

boton.addEventListener(“click”, clicBoton);

**y código html: **
<!DOCTYPE html>
<html>

<head>
<meta charset=“utf-8”>
<title>Primer dibujo con canvas</title>
<style type=“text/css”>
body{
background-color: black;
font-family: Helvetica;
color: azure;
}
</style>
</head>

<body>
<h1>Este es un Lienzo</h1>
<p>
Cuantas líneas quieres &nbsp
<input type = “text” id = “lacajalineas” value = “30”>
<input type = “button” id = “elbotonlineas” value = “Hágale”>
</p>
<canvas id=“eldibujo” width=“760” height=“760”></canvas>
<p>Fin del canvas</p>
<!–script src=“dibujo.js” charset=“utf-8”></script–>
<!–script src=“dibujoConFunciones.js” charset=“utf-8”></script–>
<!–script src=“dibujaMallas.js” charset=“utf-8”></script–>
<script src=“dibujaMallasEventuales.js” charset=“utf-8”></script>
</body>

</html>

Captura3.PNG

var texto1 = document.getElementById(“texto_figura”);
var texto = document.getElementById(“texto_lineas”);
var botton = document.getElementById(“botoncito”);
botton.addEventListener(“click”, dibujoPorClick);// addEventListener (escuhador de elementos) es para añadir al boton una funcion para ver cuando ocurre un evento

var d = document.getElementById(“dibujito”); //es un
var lienzo = d.getContext(“2d”); //es una función del objeto canvas y 2d significa segunda dimensión
var ancho = d.width;
var co = “#A367E2”;

dibujarLinea(co, 1,1,300,1);
dibujarLinea(co, 299,299,299,1);

dibujarLinea(co, 1,1,1,299);
dibujarLinea(co, 1,299,299,299);

function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal)
{
lienzo.beginPath(); //función para arrancar un trazo
lienzo.strokeStyle = color; //color de la linea es un atributo o propiedad del objeto lienzo
lienzo.moveTo(xinicial, yinicial); //función para mover el lapiz desde donde va a rrancar la linea
lienzo.lineTo(xfinal, yfinal); //función para trazar una linea
lienzo.stroke(); //función para cerra la linea
lienzo.closePath(); //función para parar eldibu
}

function dibujoPorClick()
{
var usuario = parseInt(texto1.value);
if(usuario == 1)
{
var lineas = parseInt(texto.value); //atributo “value” nos da el valor de una caja de texto
var yi, xf;
var espacio = ancho/lineas;

for (l= 1; l<= lineas;l++)
{
yi = espacio * l;
xf = 150 - (lespacio);
dibujarLinea("#19DCC6", 150, yi, xf,300);
console.log(“linea” + l); //depurar
}
for (l1 = 1; l1<= lineas; l1++)
{
yi = espacio * l1;
xf = 150 + (l1
espacio);
dibujarLinea("#19A1DC", 149, yi, xf,300);
}
}//1°if

if(usuario == 2)
{
var lineas = parseInt(texto.value); //atributo “value” nos da el valor de una caja de texto
var yi, xf;
var espacio = ancho/lineas;

for (l= 1; l<= lineas;l++)
{
yi = espacio * l;
xf = espacio * (l+1);
dibujarLinea("#4EF905 “, 300, yi, xf,0);
console.log(“linea” + l); //depurar
}
for (l1 = 1; l1<= lineas; l1++)
{
yi = espacio * l1;
xf = espacio * (l1+1);
dibujarLinea(”#EF0E0E ", 0, yi, xf,300);
}
}//2°if

if(usuario == 3)
{
var lineas = parseInt(texto.value); //atributo “value” nos da el valor de una caja de texto
var xi, yf;
var yi, xf;
var espacio = ancho/lineas;

for (l= 1; l<= lineas;l++)
{
xi = 300 - (lespacio);
yf = espacio
l;
dibujarLinea("#F96C05", xi,0, 0,yf);
console.log(“linea” + l); //depurar
}
for (l1 = 1; l1<= lineas; l1++)
{
yi = espaciol1;
xf = 300 - (l1
espacio);
dibujarLinea("#EDF905", 300,yi,xf,300);

}
}//3°if

} //functiondibujoporclick

//las funciones tienen que tener parentesis

Código para crear dos figuras donde el usuario puede elegir el numero de lineas de cada figura
![](Captura de Pantalla 2019-08-26 a la(s) 11.33.53 a. m..png

var texto = document.getElementById ("texto_linea");
var boton = document.getElementById ("botoncito");
boton.addEventListener("click",dibujoPorClick);
var textoDos = document.getElementById("texto_lineaDos");
var botonDos = document.getElementById("botoncitoDos");
botonDos.addEventListener("click",dibujoPorClickDos);
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 = "blue"
  var colorsote = "red"
  var espacio = ancho/(lineas*2)
  var xi, yf;

 for ( l= 0; l < lineas; l++ )
   {
   yi = (l* espacio)+ espacio ;
   xf = 300-(espacio *l) ;
   dibujarLinea (colorcito,300,yi,xf,300);//tome .5 para tomar la parte del pixel que me interesa

   yi = (l*espacio) ;
   xf = (espacio*l)+300 ;
   dibujarLinea (colorsote,300,yi,xf,300);

   yi = 600-(l* espacio) ;
   xf = 300-(espacio*l) ;
   dibujarLinea (colorsote,300.5,yi,xf,300.5);

   yi = (l* espacio)+300 ;
   xf = 600-(l* espacio) ;
   dibujarLinea (colorcito,300.5,yi,xf,300.5);
   }

}

  function dibujoPorClickDos ()
{

    var lineas = parseInt(textoDos.value);
    var l = 0;
    var yi, xf;
    var colorcito = "blue"
    var colorsote = "red"
    var espacio = ancho/(lineas*2)
    var xi, yf;

  for(l = 0;  l < lineas; l++)
    {
      xi= 600-(l*espacio)
      yi= l * espacio
      xf= 300 + (l* espacio)
      yf= 300 + (l* espacio)
      dibujarLinea (colorsote,xi,yi,xf,yf)

      xi= 600-(l*espacio)
      yi= 600-(l * espacio)
      xf= 300 -(l* espacio)
      yf= 300 +(l* espacio)
      dibujarLinea (colorcito,xi,yi,xf,yf)

      xi= l*espacio
      yi= 600-(l * espacio)
      xf= 300 -(l* espacio)
      yf= 300 -(l* espacio)
      dibujarLinea (colorsote,xi,yi,xf,yf)

      xi= l*espacio
      yi= (l * espacio)
      xf= 300 +(l* espacio)
      yf= 300 -(l* espacio)
      dibujarLinea (colorcito,xi,yi,xf,yf)
      }
}
Captura de pantalla (446).png

Me costo un poco, pero pudo lograrlo.

HTML

<!DOCTYPE html>
<html>
	<head lang="es">
		<meta charset="UTF-8"/>
		<title>PRACTICA 2</title>
		<link rel="icon" type="images/png" href="images/gato.png">
	</head>
	<body bgcolor="#000">
		<div style="text-align:center">
			<h1><font face="arial black" color="#fff">GRÁFICO DE LÍNEAS CON JAVASCRIPT</font></h1>
			<font color="#ffffff">
			<p>¿Cuántas líneas deseas?
			<input type="text" id="caja_texto"/ size="8"/>
			<br/><br/>
			<input type="button" value="START" id="botoncito_1"/>
			<input type="button" value="ERASE" id="botoncito_2"/>
			<input type="color" id="botoncito_3"/>
			<br/><br/>
			<canvas width="300" height="300" id="liencito"></canvas><br/>
			<p>Esta es tu obra maestra<br/>¡Sigue aprendiendo!</p>
			</font>	
		</div>
			<script src="figura.js"></script>
	</body>
</html>

JAVASCRIPT

var c_t=document.getElementById("caja_texto");
var b_s=document.getElementById("botoncito_1");
var b_e=document.getElementById("botoncito_2");
b_s.addEventListener("click", trazo_click);
b_e.addEventListener("click", borrar);

var a=document.getElementById("liencito");
var lienzo=a.getContext("2d");
var ancho=a.width;

function trazo_click()
{
	
	var lineas = parseInt(c_t.value);
	var espacio = ancho/lineas;
	var c_o=document.getElementById("botoncito_3").value;
	

	for(c_l=0; c_l<lineas; c_l++)
	{
		//GRÁFICO EXTERIOR-------------------------
		//INFERIOR IZQUIERDO.
		yi=espacio*c_l;
		xf=espacio*(c_l+1);
		trazar(c_o, 0, yi, xf, ancho);
		//SUPERIOR DERECHO.
		xi=espacio*c_l;
		yf=espacio*(c_l+1);
		trazar(c_o, xi, 0, ancho, yf);
		//SUPERIOR IZQUIERDO.
		yi=ancho-espacio*c_l;
		xf=espacio*(c_l+1);
		trazar(c_o, 0, yi, xf, 0);
		//INFERIOR DERECHO.
		xi=espacio*c_l;
		yf=(ancho-espacio)-espacio*c_l;
		trazar(c_o, xi, ancho, ancho, yf);

		//CÓDIGO DE LA ESTRELLA---------------------
		//2DO CUADRANTE.
		yi=espacio/2*c_l;
		xf=(ancho/2) + (espacio/2)*(c_l+1);
		trazar(c_o, ancho/2, yi, xf, ancho/2);
		//3ER CUADRANTE.
		xi=espacio/2*c_l;
		yf=(ancho/2) + (espacio/2)*(c_l+1);
		trazar(c_o, xi, ancho/2, ancho/2, yf);
		//1ER CUADRANTE.
		xi=espacio/2*c_l;
		yf=(ancho/2) - (espacio/2)*(c_l+1);
		trazar(c_o, xi, ancho/2, ancho/2, yf);
		//4TO CUADRANTE.
		yi=(ancho+espacio/2)-espacio/2*(c_l+1);
		xf=ancho/2 + espacio/2*(c_l+1);
		trazar(c_o, ancho/2, yi, xf, ancho/2);
	}
		//LÍNEAS SECANTES---------------------------
		trazar(c_o, 0, ancho/2, ancho, ancho/2);//línea secante horizontal.
		trazar(c_o, ancho/2, 0, ancho/2, ancho);//línea secante vertical.
}

function trazar(color, xinicial, yinicial, xfinal, yfinal)
{
	lienzo.beginPath();
	lienzo.strokeStyle=color;
	lienzo.moveTo(xinicial, yinicial);
	lienzo.lineTo(xfinal, yfinal);
	lienzo.stroke();
	lienzo.closePath();
}

function borrar()
{
	a.width=a.width;	
}

Yo le agregue color y figura

589ccf429f2e5b8b1cd22dc8b4bcf04d.png

lo pueden ver completo en https://cookiespex.github.io/Lineas-Rectas-Curvas/

Hice el programa tal y como se indica, el problema reside en que cada vez que el usuario pone otro número en la caja y le da al botón, el programa dibuja encima de las anteriores lineas. Por tanto, lo ideal sería que cada vez que le demos al botón, borre el antiguo y haga otro. De esta forma, no tener que estar recargando la página una y otra vez…
Yo busqué la forma para hacer esto y se tiene que utilizar la función clearRect que tiene cuatro parámetros (x,y, width y height). Así que si queríamos borrar todo el dibujo, solo tenemos que poner los ejes desde 0 y borrar todo el ancho y alto del canvas que está dentro de la variable lienzo. De forma que lienzo.clearRect(0,0,d.width, d.height). Y claro, esta función se tiene que ejecutar cada vez que hagamos click así que…
Captura.JPG

Captura de pantalla (11).png
DEspues de muchas tazas de cafe, de repetir la clase no se cuantas veces y tragarse la frustración. Lo logré!!!

Captura de pantalla (161).pngCaptura de pantalla (160).png

canvas con circulos.JPG
hice el ejercicio con el reto de pedirle al usuario una cantidad de circulos maxima hasta 5 =).

Canvas55555555.jpg

Si se quiere borrar el lienzo cada vez que se oprime el botón y evitar estar recargando la página cada vez que se quiera cambiar el numero de lineas, se puede utilizar el método clearRect dentro de la función que se ejecuta al oprimir el botón, de la siguiente forma:

lienzo.clearRect(0,0,AnchoLienzo,AltoLienzo);

Poco a poco ♥
Captura1.JPG

Dibujando en canvas.
canvas.png

Captura.PNG

// definir las caracteristicas del canvas
var d = document.getElementById(“dibujito”);
var lienzo = d.getContext(“2d”);
lienzo.fillStyle = “black”;
lienzo.fillRect(0, 0, d.width, d.height);
//definir las caracteristicas del input
var texto = document.getElementById(“texto_lineas”);
var dibujos = document.getElementById(“texto_dibujos”);
var boton = document.getElementById(“botoncito”);
boton.addEventListener(“click”, dibujarPorClick);

// definir la funcion de Dibujo
function dibujarLinea (color,xi,yi,xf,yf)
{
lienzo.strokeStyle = color;
lienzo.beginPath();
lienzo.moveTo(xi,yi);
lienzo.lineTo(xf,yf);
lienzo.stroke();
lienzo.closePath();
}

dibujarLinea(“White”, 150, 0, 150, 300);
dibujarLinea(“White”, 0, 150, 300, 150);
//definir la funcion para dibujar la torre.
var ancho = d.width;

function dibujarPorClick()
{
var cantidadLineas = parseInt(texto.value);
var cantidadDibujos = parseInt(dibujos.value);
var yIn, xFn, a, b, c, d;
var colorcito = “#FAA”;

if (cantidadDibujos == 1)
{
for (var i = 0; i < cantidadLineas; i++)
{
var espacio = (ancho/2) / cantidadLineas;
yIn = espacio * i;
a = 150 - yIn;
b = 150 + yIn;
c = 300 - yIn;
dibujarLinea(“Blue”, yIn, 150, 150, a);
dibujarLinea(colorcito, 150, yIn, b, 150);
dibujarLinea(“white”, yIn, 150, 150, b);
dibujarLinea(“Green”, 150, c, b, 150);
}
}
else if (cantidadDibujos == 2)
{
for (var i = 0; i < cantidadLineas; i++)
{
var espacio = ancho / cantidadLineas;
yIn = espacio * i;
xFn = espacio * (i+1);
a = 300 - yIn;
dibujarLinea(“Green”, 0, a, xFn, 0);
dibujarLinea(“white”, yIn, 0, 300, xFn);
dibujarLinea(“Blue”, yIn, 300, 300, a);
dibujarLinea(colorcito,0, yIn, xFn, 300);
}
}
else
{
for (var i = 0; i < cantidadLineas; i++)
{
var espacio = (ancho/2) / cantidadLineas;
yIn = espacio * i;
a = 150 - yIn;
b = 150 + yIn;
c = 300 - yIn;
dibujarLinea(“Blue”, yIn, 150, 150, a);
dibujarLinea(colorcito, 150, yIn, b, 150);
dibujarLinea(“white”, yIn, 150, 150, b);
dibujarLinea(“Green”, 150, c, b, 150);
}
for (var i = 0; i < cantidadLineas; i++)
{
var espace = ancho / cantidadLineas;
yIn = espace * i;
xFn = espace * (i+1);
d = 300 - yIn;
dibujarLinea(“Green”, 0, d, xFn, 0);
dibujarLinea(“white”, yIn, 0, 300, xFn);
dibujarLinea(“Blue”, yIn, 300, 300, d);
dibujarLinea(colorcito,0, yIn, xFn, 300);
}
}
}

<meta charset=“utf-8”/>

  • Permite agregar tilde, ñ, letras raras, etc…
  • h1 es un título
  • p es un párrafo
  • br salto en línea
  • input —> diferentes elementos de formulario
  • id = identificamos etiqueta en html que se pueda trabajar en JavaScript (+ el nombre)
  • value = valor del botón
  • canva = lugar abierto donde podemos dibujar con JavaScript, ancho y alto lo determina el usuario (TÚ) + su id
  • Podemos cargar script externos, (tienen un código + ordenado)
  • Obtienes un html usando getElementById y se puede guardar en una variable
  • El objeto puede tener un evento, que dispara una función
  • Se puede dibujar en 2d y **3d **utilizando el contexto de canvas —> getContext
  • Hay funciones que reciben parámetros
  • Como también hay funciones qué NO reciben parámetros u se disparan en casos especiales
  • parseInt convierte un texto en un número
canvas.png
SharedScreenshot6.jpg

Freddy diciendo al inicio de la clase que usemos el año real y no el 2020 usado como ejemplo.
Yo viendo la clase en el 2020 jaja

Untitled.png
Untitled 2.png
trabajo (1).jpg
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body
        {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: black;
        color: white;
        text-align: center;
       
        }
        
        canvas{
            
             text-align: center;
        }
    </style>

    <title>Document</title>
</head>
<body>
    <h1><marquee>Dibujo en Canvas</marquee></h1>
    <P> 
        
        Desea su dibujo  :
        <input type="checkbox"  id="con_marco"/> <label for="con_marco"> Con marco </label>
        <input type="checkbox"  id="sin_marco"/> <label for="sin_marco"> Sin marco  </label> <br/>
        ¿Cuál color le gustraría ?
        <input type="color" id="color_image" onchange="cambioColor()"/>
        <br/>¿Cuántas líneas quieres? 
        <input type="text" id="txt_lineas"/>
        <input type="button" value="A darle" id="botoncito"/> <br/>
        
       
        <!-- ]<input type="button" value="done" id="changecolor" onclick="cambioColor()">  -->
    </P>
    <canvas width="300" height="300" id="dibujito"></canvas>
    <p>Mi primer dibujo</p>
    <script src="dibujo.js"></script>
</body>
</html>

En JSS fue este cóigo :

var boton= document.getElementById("botoncito");
var texto = document.getElementById("txt_lineas");
boton.addEventListener ("click",dibujoPorClick );
var check_marco = document.getElementById("con_marco");
check_marco.addEventListener("click",check);
var check_sinmarco = document.getElementById("sin_marco");
check_sinmarco.addEventListener("click",sincheck);
var color_fig;
// console.log(colorcito);

var d = document.getElementById("dibujito");
var lienzo = d.getContext("2d"); //Plano en 2d 
var ancho = d.width;

function cambioColor()
{
    var colorcito = document.getElementById("color_image");
     color_fig = colorcito.value;
}



function check(){
    if (check_marco.checked )
    {
        i=3;
        dibujarLinea("#2EFEF7",1,1,1,299)
        dibujarLinea("#2EFEF7",1,299,299,299)
        dibujarLinea("#2EFEF7",299,299,299,1)
        dibujarLinea("#2EFEF7",299,1,1,0) 
    }
    else{

       i=2;
    dibujarLinea("black",1,1,1,299)   
    dibujarLinea("black",1,299,299,299)
    dibujarLinea("black",299,299,299,1)
    dibujarLinea("black",299,1,1,1)

    }

    
}

function sincheck()
{
    i=2;
    dibujarLinea("black",1,1,1,299)   
    dibujarLinea("black",1,299,299,299)
    dibujarLinea("black",299,299,299,1)
    dibujarLinea("black",299,1,1,1)
}


function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal)
{

lienzo.beginPath();
    if( i ==2 ){
        lienzo.lineWidth = 3;
        
    }
    else if( i==3  )
    {
        lienzo.lineWidth = 1;
    }
    

lienzo.strokeStyle = color;
lienzo.moveTo(xinicial , yinicial);
lienzo.lineTo(xfinal ,  yfinal);
lienzo.stroke();
lienzo.closePath(); 

}

function dibujoPorClick()
{
    i=3;
 var lineas = parseInt(texto.value);
 var mitad_espacio = ancho/2;
 var espacio = mitad_espacio/lineas ;
 var l =0;
 var yi, xf;
 
console.log(color_fig);
    for(l= 0 ; l<lineas ; l++ )
    {
    yi=  (espacio)* l;
    xf= (espacio * (l+1))+ mitad_espacio;

    dibujarLinea(color_fig,150,yi,xf,150);
    } 

    for(l= 0 ; l<lineas ; l++ )
    {
    yi=  ancho -(espacio * l);
    xf= (espacio * (l+1))+ mitad_espacio;

    dibujarLinea(color_fig,150,yi,xf,150);
    } 

    for(l= 0 ; l<lineas ; l++ )
    {
    yi=   espacio* l;
    xf= mitad_espacio -(espacio * (l+1));

    dibujarLinea(color_fig,150,yi,xf,150);
    } 

    for(l= 0 ; l<lineas ; l++ )
    {
    yi=  ancho -(espacio * l);
    xf= mitad_espacio -(espacio * (l+1));

    dibujarLinea(color_fig,150,yi,xf,150);
    } 


}

Hola, Freddy. Te felicito por el curso y a la vez te doy las gracias por la enseñanza de calidad. Si me permites haré una sugerencia: sabemos que el tiempo en internet cuesta y enseñar todas las herramientas es muy complicado, así que mi consejo es que escriban un libro(virtual o PDF) completo por cada curso que hagan con el que los estudiantes podamos complementar más las clases. Espero sirva de algo mi sugerencia. Saludos.

Despues de muchos intentos logré poner la opción para que el usuario escoja el color de las lineas 😄

function dibujoPorClick()
{
  var lineas = parseInt(texto.value);
  var l = 0;
  var width_to_zero;
  var zero_to_width;
  var espacio = ancho / lineas;
  var escoge_color = document.getElementById("escoge_colorcito").value;
  for (l = 0; l < lineas; l++)
  {
      width_to_zero = ancho - (espacio * l);
      zero_to_width = espacio * l;
      dibujarLinea(escoge_color, 0, width_to_zero, zero_to_width, 0);
      dibujarLinea(escoge_color, zero_to_width, 0, ancho, zero_to_width);
      dibujarLinea(escoge_color, ancho, zero_to_width, width_to_zero, ancho);
      dibujarLinea(escoge_color, width_to_zero, ancho, 0, width_to_zero);
      console.log("Linea " + l);
  }
}
  //bordes
  dibujarLinea("blue", 1, 1, 299, 1);
  dibujarLinea("blue", 1, 1, 1, 299);
  dibujarLinea("blue", 1, 299, 299, 299);
  dibujarLinea("blue", 299, 1, 299, 299);

  //centro
  dibujarLinea("blue", 100, 100, 200, 100);
  dibujarLinea("blue", 100, 100, 100, 200);
  dibujarLinea("blue", 100, 200, 200, 200);
  dibujarLinea("blue", 200, 100, 200, 200);
Captura de pantalla (1).png
2020-04-07 (2).png
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    *{
      box-sizing: border-box;
    }
    section{
      height: 100vh;
      display: grid;
      grid-template-columns: minmax(auto, 400px);
      
      justify-content: center;
    }
    .d-grid{
      /* margin: 150px; */
      display: grid;
      grid-template: auto 100px auto / 1fr;
      justify-content: center;
      align-content: center;
    }

    .img-container{
      border-radius: 5px 5px 0 0;
      
      display: flex;
      justify-content: center;
    }
    .container{
      /* width: 300px; */
      width: 100%;
      justify-self: center;
      padding: 10px;
      border: 1px solid #f3f8fb;
      /* border-radius: 10px; */
      background-color: #f3f8fb;
    }
    canvas{
      width: 100%;
      height: 50vh;
      border-radius: 0 0 5px 5px;
      border: 1px solid #88d4ff;
    }
    .texto{
      width: 100%;
      margin: 5px 0;
      padding: 5px;
      border: none;
      border-radius: 5px;
      border: 1px solid #88d4ff;
    }
    .bg-platzi{
      background-color: #263f4e;
      padding: 5px;
      color: #fff;
      font-family: 'Lato', sans-serif;
    }
    .btn-platzi{
      width: 100%;
      margin: 5px 0;
      display: inline-block;
      border: none;
      color: #fff;
      cursor: pointer;
      outline: 0;
      padding: 5px 10px;
      font-weight: bold;
      background-color: #95ca3e;
      font-family: 'Lato', sans-serif;
      border-radius: 5px;
      border-bottom: 2px solid #669840;
    }
    .btn-platzi:hover{
      background-color: #a6d160;
    }
    .btn-platzi:active{
      margin-top: 7px;
      background-color: #608327;
      border: none;
    }
  </style>
  <title>Document</title>
  
</head>
<body>
  <section>
    <div class="hero d-grid">
      <div class="bg-platzi img-container">
        <div>
          <img class="" src="Logo-platzi.webp" alt="" class="img-fluid">
        </div>
        <div>
          <img class="" src="logotipo-platzi.webp" alt="" class="img-fluid">
        </div>
      </div>      
      <div class="container">
        <input id="texto" type="text" placeholder="Ingrese la cantidad de lineas deseada" class="texto">
        <input id="boton" type="button" class="btn-platzi" value="Añadir Lineas">
      </div>
      <canvas id="dibujo">
    </div>
  </section>

  </canvas>
  <script>

    var numerosInput = document.getElementById('texto')
    var cuadroDeDibujo = document.getElementById('dibujo')

    var boton = document.getElementById('boton')
    var lienzo = cuadroDeDibujo.getContext('2d')

    boton.addEventListener('click', añadirLineas)


    function añadirLineas(){
      const lineasTotales = numerosInput.value

      const BORRAR = ""

      const ALTURA = cuadroDeDibujo.height
      const ANCHURA = cuadroDeDibujo.clientWidth
      
      const cambioDePosicionY = ALTURA / lineasTotales
      const cambioDePosicionX = ANCHURA / lineasTotales

      const bordeIzquierdo = 0
      const bordeSuperior = 0

      var yInicial = bordeSuperior
      var xFinal = cambioDePosicionX

      // console.log(`este es lienzo.width: ${cuadroDeDibujo.width}`)
      for(var linea = 0; linea < lineasTotales; linea++){

        dibujarLinea(bordeIzquierdo, yInicial, xFinal, ALTURA)

        yInicial += cambioDePosicionY 
        xFinal += cambioDePosicionX

      }
      numerosInput.value = BORRAR
    }
    
    function dibujarLinea(xInicial, yInicial, xFinal, yFinal){
      lienzo.beginPath()
      lienzo.strokeStyle = '#95ca3e'
      lienzo.moveTo(xInicial, yInicial)
      lienzo.lineTo(xFinal, yFinal)
      lienzo.stroke()
      lienzo.closePath()
    }
  </script>
</body>
</html>

**Comparto mis resultados!! espero puedan hacer comentarios de enrrequecimiento compañeros.
**
muestra1.png

muestra2.png
<code>
                                  **HTML**
 <!DOCTYPE html>
<html>
<head>
	<title>Fugura</title>
	<meta charset="utf-8" />
</head>
<body>
	<h1>Formas geometricas</h1>
	<p>Ingresa el numero de lineas que conformaran cada figura <br/> <br/>
		<input type="texto" id="texto_figext" /> 
		<input type="button" value="Figuras Exteriores" id="figuras_exteriores" /> <br/> <br/>
		<input type="texto" id="texto_thorizontal" /> 
		<input type="button" value="Triangulos Horizontales" id="triangulos_horizontales" /> <br/> <br/>
		<input type="texto" id="texto_tvertical" /> 
		<input type="button" value="Triangulos Verticales" id="triangulos_verticales" />
	</p> 
	
	<canvas id="midibujo" width="300" height="300"></canvas>
	<script type="text/javascript" src="figura.js"></script>

	<p>Vusualizando el Resultado</p>

</body>
</html>
                      **  JAVASCRIPT**
var lineasFigext=document.getElementById("texto_figext");
var fExteriores=document.getElementById("figuras_exteriores");
fExteriores.addEventListener("click", figurasExteriores);

var lineasThorizontal=document.getElementById("texto_thorizontal");
var tHorizontales=document.getElementById("triangulos_horizontales");
tHorizontales.addEventListener("click", triangulosHorizontales);

var lineastvertical=document.getElementById("texto_tvertical");
var tVerticales=document.getElementById("triangulos_verticales");
tVerticales.addEventListener("click", triangulosVerticales);


var dimension=document.getElementById("midibujo");
var ancho=dimension.width;
var lienzo=dimension.getContext("2d");

function dibujarLinea(color, xinicial, yinicial, xfinal, yfina)
{
	lienzo.beginPath();
	lienzo.strokeStyle=color;
	lienzo.moveTo(xinicial,yinicial);
	lienzo.lineTo(xfinal,yfina);
	lienzo.stroke();
	lienzo.closePath();
}

function figurasExteriores()
{
	var lineasExteriores=parseInt(lineasFigext.value);
	var espacio_exterios=ancho/lineasExteriores;
	l=0;
while(l<lineasExteriores)
{
	yi=espacio_exterios*l;
	xf=espacio_exterios*(l+1);
	dibujarLinea("black", 0,yi, xf, 300);
	l++; 
}

for(l=0;l<lineasExteriores;l++)
{
	var xf=espacio_exterios+(espacio_exterios*l);
	var yi=300-(espacio_exterios*l);
	dibujarLinea("black",0,yi,xf,0);	
}

for(l=0; l<lineasExteriores; l++)
{
	var xi=espacio_exterios*l;
	var yf=espacio_exterios*(l+1);
	dibujarLinea("black", xi,0, 300, yf);
}

for(l=0; l<lineasExteriores; l++)
{
	var xf=290-(espacio_exterios*l);
	var yi=espacio_exterios+(espacio_exterios*l);
	dibujarLinea("black", 300,yi, xf, 300);
}

}

function triangulosHorizontales()
{
	var lineasHorizontales=parseInt(lineasThorizontal.value);
	var espacio_horizontales=ancho/lineasHorizontales;
	for(var l=0; l<=lineasHorizontales;l++)
{
	var xi=espacio_horizontales*l;
	var xf=300-(espacio_horizontales*l);
	dibujarLinea("red", xi, 0, xf, 300);
}
}

function triangulosVerticales()
{
	var lineasVerticales=parseInt(lineastvertical.value);
	var espacio_verticales=ancho/lineasVerticales;
	for(var l=0; l<=lineasVerticales;l++)
{
	var yi=espacio_verticales*l;
	var yf=300-(espacio_verticales*l);
	dibujarLinea("green", 0, yi, 300, yf);
}

}

![](Captura.JPG

Este es mi resultado despues de horas de trabajo
ejemplo 1.jpg

ejemplo.png

Hola Freddy, tu código tiene un problema, si escribes un valores de manera decreciente la imagen no se modifica, tienes que estar refrescando la página para escribir un nuevo valor, esto lo he solucionado colocando la siguiente línea de código justo al principio de la función dibujoPorClic:

function dibujoPorClic()
{
lienzo.clearRect(0, 0, d.width, d.height);

muy buen curso, un saludo.

Hola a [email protected]! Buenas tardes 😃 !!!
Les comparto lo que hice yo como ejercicio: El fractal del triángulo de Sierpinski.
Llegue a tardarme aproximadamente 1.5 semanas debido a estar haciendo prueba y error en el algoritmo matemático. No lo copie de nadie.
Me quedaron muchas dudas sobre FUNCTION a partir de este ejercicio, pero estas las colocaré en el área de preguntas.
Ánimo a [email protected] los que estén en medio de esta práctica. Busquen respuestas por aquí o por la web. Solo no se den por vencido.
Saludos!
2.jpg
7.jpg
8.jpg
9.jpg

![](Imagen1.png

Le aumente checkboxes
![](canv.png
Este es mi codigo
html:

<!DOCTYPE html>
<meta charset="utf-8" />
<html>
<head>
	<title>Diseño de Lineas</title>
</head>
<body>
	<h1>Dibujo en Canvas</h1>
	<p>
		Dibujar
		<input type="text" id="texto1" size=1> 
		lineas <br>
		<input type="checkbox" id="caja1"> 
		Esquina Superior Izquierda <br>
		<input type="checkbox" id="caja2">
		Esquina Superior Derecha  <br>
		<input type="checkbox" id="caja3">
		Esquina Inferior Izquierda <br>
		<input type="checkbox" id="caja4">
		Esquina Inferior Derecha  <br>
		<input type="button" id="boton1" value="Dibujar">
		<input type="button" id="boton2" value="Borrar">
	</p>
	<p>
		<canvas width=300 height=300 id="areaDib"></canvas>
	</p>
	<script type="text/javascript" src="dibLineas.js"></script>
</body>
</html>

js:

//variables
var canv=document.getElementById("areaDib");
var lienzo=canv.getContext("2d");
var texto=document.getElementById("texto1");
var boton_1=document.getElementById("boton1");
var boton_2=document.getElementById("boton2");
var caja_1=document.getElementById("caja1")
var caja_2=document.getElementById("caja2")
var caja_3=document.getElementById("caja3")
var caja_4=document.getElementById("caja4")
var nLineas;
var ancho=canv.width;
var alto=canv.height;
//eventos
boton1.addEventListener("click",dibtrazo);
boton2.addEventListener("click",borrar);


//funciones
function dibLinea(xi,yi,xf,yf,color)
{
lienzo.beginPath();
lienzo.strokeStyle=color;
lienzo.moveTo(xi,yi);
lienzo.lineTo(xf,yf);
lienzo.stroke();
lienzo.closePath();
}
function dibtrazo()
{
	nLineas=parseInt(texto.value);
	canv.width=canv.width

	for (var l=0;l<nLineas;l++) 
	{
		if (caja_1.checked==true)
		{
			dibLinea(0,alto-l*alto/nLineas,(l+1)*ancho/nLineas,0,"blue");
		}
		if (caja_2.checked==true)
		{
			dibLinea(l*ancho/nLineas,0,ancho,(l+1)*alto/nLineas,"blue");			
		}
		if (caja_3.checked==true)
		{
			dibLinea(0,l*alto/nLineas,(l+1)*ancho/nLineas,alto,"blue");		
		}
		if (caja_4.checked==true)
		{
			dibLinea(l*ancho/nLineas,alto,ancho,alto-(l+1)*alto/nLineas,"blue");		
		}
	}

	dibLinea(1,1,299,1,"blue");
	dibLinea(299,1,299,299,"blue");
	dibLinea(1,1,1,299,"blue");
	dibLinea(1,299,299,299,"blue");
}
function borrar()
{
	canv.width=canv.width
}

Como tip por si alguien no lo tiene, les comento que para limpiar el canvas sin necesidad de recargar la página agreguè lo siguiente en mi código:

d.width = d.width;
Básicamente lo que hace es asignar de nuevo el ancho del canvas al canvas. “d” es el nombre de mi variable a la que cargué el objeto canvas “dibujito”.

var d = document.getElementById('dibujito'); var ancho = d.width; var lienzo = d.getContext('2d');

y dentro de la funcion dibujoPorClick() es donde agrego la reasignación del ancho al canvas, para que cada que des click al boton, primero lo limpie y luego haga el dibujo con la nueva cantidad de líneas que se colocaron en el cuadro de texto. Mi diseño y código están en los comentarios anteriores a este, 😃

nuevo canvas.png
tarea canvas 2.JPG
<var cantidadLineas = document.getElementById('cantidadLineas');
var colorVela = document.getElementById('color');
var boton = document.getElementById('boton');

boton.addEventListener('click', dibujoPorClick);

var d = document.getElementById('dibujito');
var lienzo = d.getContext('2d');
var anchoLienzo = d.width;
var altoLienzo = d.height;


// Funcion para hacer uso del canvas
function dibujarLinea(color, xinicial, xfinal, yinicial, yfinal) {
    lienzo.beginPath();
    lienzo.strokeStyle = color;
    lienzo.moveTo(xinicial, yinicial);
    lienzo.lineTo(xfinal, yfinal);
    lienzo.stroke();
    lienzo.closePath();
}

function dibujo_olas(origenx, origeny, ancho, alto) {
    var xi = origenx;
    var xf = origenx - ancho;
    var yi = origeny - alto;
    var yf = origeny;


    for (var index = 0; index < ancho; index++) {

        dibujarLinea('blue', xi, xf - index, yi + index, yf);
        dibujarLinea('blue', xi, xi + index, yi + index, yf);
    }
}


function dibujo_barco(origenx, origeny, ancho, alto) {


    var xi = origenx;
    var xf = origenx - ancho;
    var yi = origeny - alto;
    var yf = origeny;
    for (var index = 0; index < ancho; index++) {
        dibujarLinea(colorVela.value, xi, xf - index, yi + index, yf);
        dibujarLinea(colorVela.value, xi, xf - ancho, yi, yf);
        if (index < 20) {
            dibujarLinea('brown', xi - index, xf - ancho + index, yf + index, yf + index);
            dibujarLinea('brown', xi - index, xf - ancho + index, yf + index, yf + index);
            dibujarLinea('brown', xi - index, xf - ancho + index, yf + index, yf + index);
        }

    }

}


function dibujoPorClick() {
    // limpiar el lienzo para evitar la acumulacion de dibujos.
    lienzo.clearRect(0, 0, anchoLienzo, altoLienzo);

    // variable para obtener el valor de ancho del canvas en entero
    var txt_cantidad = parseInt(cantidadLineas.value);
    dibujo_olas(200, 150, 20, 20);
    dibujo_olas(150, 150, 50, 50);
    dibujo_olas(100, 150, 20, 20);
    dibujo_olas(50, 150, 50, 50);


    dibujo_barco(txt_cantidad, 130, 50, 50);

}>

Mi tarea permite escoger ancho y alto del canvas, cantidad de lineas y color.
Este es el codigo HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8”>
<title>DIBUJANDO CON CANVAS</title>
</head>
<body>
<h1>Flor en CANVAS</h1>
<p>
Ancho del dibujo :
<input type=“text” id=“texto-ancho”/>
Alto del dibujo :
<input type =“text” id=“texto-alto”/>
Cantidad de líneas :
<input type=“text” id=“texto-lineas”/>
Color :
<input type=“text” id=“texto-color”/>
<input type=“button” value=“A darle” id=“botoncito”/>
</p>
<canvas id=“dibujito” width=600 height=600></canvas>
<p>asi queda la flor.</p>
<script src=“dibujo.js”>
</script>
</body>
</html>

El codigo javascript:

var texto=document.getElementById(“texto-lineas”);
var ancho=document.getElementById(“texto-ancho”);
var alto=document.getElementById(“texto-alto”);
var color=document.getElementById(“texto-color”);

var boton=document.getElementById(“botoncito”);
boton.addEventListener(“click”,dibujoPorClick);

var d=document.getElementById(“dibujito”);
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()
{

d.width=ancho.value;
d.height=alto.value;
var l=0;
var lineas = parseInt(texto.value);
var alto2 = parseInt(alto.value);
var ancho2= parseInt(ancho.value);
var colorcito = color.value;
var espaciox = ancho2/2 / lineas;
var espacioy = alto2/2 / lineas;
var ax,ay,bx,by;
console.log(ancho2,alto2,espaciox,espacioy,lineas);

for(l=0 ; l < lineas ; l++)
{
ax = espaciox * l;
ay = espacioy * l;
bx = espaciox * (l + 1);
by = espacioy * (l + 1);
dibujarLinea(colorcito,0,ay,bx,alto2/2);
dibujarLinea(colorcito,ax,0,ancho2/2,by);
dibujarLinea(colorcito,ancho2/2,alto2/2-ay,ancho2/2+bx,0);
dibujarLinea(colorcito,ancho2/2+ax,alto2/2,ancho2,alto2/2-by);

dibujarLinea(colorcito,0,alto2-ay,bx,alto2/2);
dibujarLinea(colorcito,ax,alto2,ancho2/2,alto2-by);

dibujarLinea(colorcito,ancho2/2,alto2/2+ay,ancho2/2+bx,alto2);
dibujarLinea(colorcito,ancho2/2+ax,alto2/2,ancho2,alto2/2+by);
}
//Dibuja bordes exteriores
dibujarLinea(colorcito,1,1,ancho2-1,1);
dibujarLinea(colorcito,ancho2-1,1,ancho2-1,alto2-1);
dibujarLinea(colorcito,1,1,1,alto2-1);
dibujarLinea(colorcito,1,alto2-1,ancho2-1,alto2-1);
//Dibuja bordes internos
dibujarLinea(colorcito,ancho2/2,1,ancho2/2,alto2);
dibujarLinea(colorcito,0,alto2/2,ancho2,alto2/2);
}

++Y los resultados:
++

![](flor1.png
flor2.png
flor3.png

skater4.PNG
skater2.PNG
cod15.PNG

Yo hice un botón para limpiar el canvas y evitar tener que recargar una y otra vez la pagina para volver a dibujar, espero que les sirva aquí dejo el código que use para crearlo:

Este es el html

<p>
      Limpiar canvas <br>
      <input type="button" value="Borrar" id="botonsito2"/>
    </p>```

Y este el js

var boton2 = document.getElementById(‘botonsito2’)
boton2.addEventListener(“click”, borrado)

function borrado() {
lienzo.clearRect(0,0,300,300);
}


No pidan ayuda sin mandar el código, chiques. Es muy dificil poder ayudar así.

Hola, una pregunta, ustedes realmente apenas están aprendiendo a programar? Porque es que estoy viendo que hacen unos codigos como profesionales, yo apenas le puedo seguir el paso a Freddy incluso algunas cosas no las entiendo y un video de 38 minutos se me convierte a mi en 2 horas.

un proyecto con canvas
https://github.com/juanda103/Tansform-in-Canvas
![]( Sin título.png)

TU LO CREAS , TU LO INVENTAS

Costó sangre, sudor y lágrimas pero salio!!! #VivaYo

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Dibujando</title>
  </head>
  <body>
    <h1>Dibujando con Canvas</h1>
    <p>¿Cuántas líneas quieres?
      <input type="text" id="texto_lineas"/>
      <input type="button" value="¡A darle!" id="botonaso"/>
    </p>
    <canvas id="boton" width="300" height="300"></canvas>
    <p>Así queda tu dibujo</p>
    <script src="boton.js">
    </script>
  </body>
</html>

JavaScript

var texto = document.getElementById("texto_lineas");
var boton = document.getElementById("botonaso");
boton.addEventListener("click", dibujoPorClick);

var d = document.getElementById("boton");
var lienzo = d.getContext("2d");
var ancho = d.width;

function dibujoPorClick()
{
  var lineas = parseInt(texto.value);
  var l = 0;
  var xi, yi, xf, yf;
  var espacio = ancho / lineas;

  dibujarLinea("black", 299, 299, 1, 299);
  dibujarLinea("black", 299, 299, 299, 1);
  dibujarLinea("black", 1, 1, 299, 1);
  dibujarLinea("black", 1, 1, 1, 299);

  for (l = 0; l < lineas; l++)
  {
      yi = espacio * l;
      xf = espacio * (l + 1);
      dibujarLinea("red", 0, yi, xf, 300);
  }
  for (l = 0; l < lineas; l++)
  {
      yf  = espacio * (l + 1);
      xi = espacio * (l + 1);
      dibujarLinea("blue", xi, 0, 300, yf);
  }

  for (l = 0; l < lineas; l++)
  {
      yi = 300 - (espacio * (l + 1));
      xf = espacio * (l + 1);
      dibujarLinea("green", 300, yi, xf, 300);
  }

  for (l = 0; l < lineas; l++)
  {
    yi = espacio * (l + 1);
    xf = 300 - (espacio * (l + 1));
    dibujarLinea("yellow", 0, yi, xf, 0);
  }

  function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal)
  {
      lienzo.beginPath();
      lienzo.strokeStyle = color;
      lienzo.moveTo(xinicial, yinicial);
      lienzo.lineTo(xfinal, yfinal);
      lienzo.stroke();
      lienzo.closePath();
  }

}

![](canvas_150.png

Figura 1:

Captura1.JPG

Figura 2:

Captura2.JPG

HTML:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Dibujando con canvas</title>
	</head>
	<body>
		<h1>Dibujo en canvas</h1>
		<p>
			Cuántas líneas quieres?

			<input type="text" id="texto_lineas"/><br/>

			Cuál figura deseas:
			<div>
	            <input type="radio" id="figura1" 
	                   name="seleccionFigura" value="1" />
	            <label for="figura1">Figura 1</label>
	        </div>

	        <div>
	            <input type="radio" id="figura2" 
	                   name="seleccionFigura" value="2" />
	            <label for="figura2">Figura 2</label>
	        </div>
	        <br/>

			<input type="button" value="A darle!" id="botoncito"/>

		</p>

		<canvas width="300" height="300" id="dibujito"></canvas>
		<p>@manuelpr039</p>

		<script src="dibujo.js"></script>

	</body>
</html>

JS:

var texto = document.getElementById("texto_lineas");
var boton = document.getElementById("botoncito");
var d = document.getElementById("dibujito"); //Método para obtener un elemento del documento por su ID
var lienzo = d.getContext("2d"); //Método del canvas para definir el escenario 2d o 3d
var ancho = d.width;
var ancho2 = (d.width)/2;
var gradiente;

boton.addEventListener("click", dibujoPorClick);

//Para dibujar el marco con gradiente de colores
gradiente = lienzo.createLinearGradient(100,100,270,0);
dibujarLineaMarco(1,1,ancho-1,ancho-1);

//Función para dibujar la Figura 1
function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal){

	lienzo.beginPath();
	lienzo.strokeStyle = color;
	lienzo.lineWidth=1;
	lienzo.moveTo(xinicial, yinicial);
	lienzo.lineTo(xfinal, yfinal);
	lienzo.stroke();
	lienzo.closePath();
}

//Función para dibujar el marco con gradiente de colores
function dibujarLineaMarco(xinicial, yinicial, xfinal, yfinal){

	gradiente.addColorStop("0", "yellow");
	gradiente.addColorStop("0.1", "blue");
	gradiente.addColorStop("1.0", "red");
	lienzo.lineWidth = 5;
	lienzo.strokeStyle = gradiente;
	lienzo.strokeRect(xinicial,yinicial,xfinal,yfinal)
}

function dibujoPorClick(){

	var lineas=parseInt(texto.value);
	var l;
	var n=1;
	var yi, xf, xi, yf;
	var colorcito;
	var espacio = ancho / lineas;
	var espacio2 = ancho2 / lineas;

	d.width = d.width
	dibujarLineaMarco(1,1,ancho-1,ancho-1);

	if(document.getElementById("figura1").checked){

		for(l=0; l<lineas; l++){
			
			yi = espacio*l;
			xf = espacio*(l+1);
			xi = espacio*l;
			yf = espacio*(l+1);

			if(("color"+n)=="color1"){
				colorcito="yellow";
			}else if(("color"+n)=="color2"){
				colorcito="blue";
			}else{
				colorcito="red";
			}

			dibujarLinea(colorcito, 0, yi, xf, 300);
			dibujarLinea(colorcito, xi, 0, 300, yf);	
			dibujarLinea(colorcito, 0, 300-xf, yi, 0);
			dibujarLinea(colorcito, 300, xf, 300-yi, 300);

			if(n==3){
				n=1;
			}else{
				n++;
			}

		}

	}else if(document.getElementById("figura2").checked){

	 	for(l=0; l<lineas;l++){

	 		xi=espacio2*l
	 		yf=150-(espacio2*l);
	 		xi2=300-(espacio2*l);
	 		yf2=150-(espacio2*l);
	 		yf3=150+(espacio2*l);
	 		yf4=150+(espacio2*l);

	 		if(("color"+n)=="color1"){
	 			colorcito="yellow";
	 		}else if(("color"+n)=="color2"){
	 			colorcito="blue";
	 		}else{
	 			colorcito="red";
	 		}

	 		dibujarLinea(colorcito, xi, 150, 150, yf);
	 		dibujarLinea(colorcito, xi2, 150, 150, yf2);
	 		dibujarLinea(colorcito, xi, 150, 150, yf3);
	 		dibujarLinea(colorcito, xi2, 150, 150, yf4);
	 		
			if(n==3){
				n=1;
			}else{
				n++;
			}
	
	 	}

	}else{
	 	alert("Solo tenemos dos figuras por el momento, debes escoger entre la 1 y la 2.");
	}

}

console.log(lienzo);

Así me quedó el canvas despues de torturar mi cerebro por casi un dia jaja 2018-08-23 (1).png

var texto = document.getElementById("texto_lineas");
var boton = document.getElementById("botoncito");
var colores = document.getElementById("star_Color");

boton.addEventListener("click", dibujoPorClick);

var d = document.getElementById("dibujito");
var lienzo = d.getContext("2d");
var ancho = d.width;
var alto = d.height;

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 = colores.value;
  var espacio = (alto / 2) / lineas;
  lienzo.fillStyle = "white";
  lienzo.fillRect(0, 0, ancho, ancho);
  lienzo.clearRect(0, 0, ancho, ancho);
  dibujarLinea(colorcito, 1, 150, ancho - 1, 150);

  for(l = 0; l < lineas; l++)   // Superior izquierdo
  {
    yi = espacio * l;
    xf = 150 - (espacio * l);
    dibujarLinea(colorcito, 150, yi, xf,150);
  }

  for(l = 0; l < lineas; l++)  // Superior derecho
  {
    yi = espacio * l;
    xf = 150 + (espacio * l);
    dibujarLinea(colorcito, 150, yi, xf,150);
  }

  for(l = 0; l < lineas; l++)  // Inferior izquierdo
  {
    yi = 299 - (espacio * l);
    xf = 150 - (espacio * l);
    dibujarLinea(colorcito, 150, yi, xf,150);
  }

  for(l = 0; l < lineas; l++)  // Inferior izquierdo
  {
    xf = 150 + (espacio * l);
    yi = 299 - (espacio * l);
    dibujarLinea(colorcito, 150, yi, xf,150);
  }
}

Yo creé un programa que te dibuja un triangulo de cualquier dimención solo se tiene que indicar las coordenadas de las tres esquina.

El codigo de del HTML

<
<!DOCTYPE html>
<head>
 <meta charset="utf-8"/>
    <title>Proyecto personal de estrella</title>

    <body>
      <h1> Dibujo en un triangulo en la cordenada deseada</h1>
      <canvas id="canvas" width="300" height="300"></canvas>

      <br> Primer punto <br> X: <input type="text" id = "texto_punto1x"/> Y: <input type = "text" id = "texto_punto1y"/>
      <br> Segundo punto <br> X: <input type="text" id = "texto_punto2x"/> Y: <input type = "text" id = "texto_punto2y"/>
      <br> Tercer punto <br> X: <input type="text" id = "texto_punto3x"/> Y: <input type = "text" id = "texto_punto3y"/>


      <br> <input type="button" value= "OK!!!" id = "botoncito"/>
      <p> <br> Favor de colocar las coordenadas del triangulo <br>
      la medida maxima es de <strong> 300 pixeles x 300 pixeles el area editatble</strong>.</p>
      <script src="dibujo_personal.js" charset="utf-8"></script>

    </body>
</head>
>

Codigo del JS


var d = document.getElementById("canvas");
var lienzo = d.getContext("2d");
var prueba;

//************** Elementos de HTML**************
var texto_p1x = document.getElementById ("texto_punto1x");
var texto_p1y = document.getElementById ("texto_punto1y");

var texto_p2x = document.getElementById ("texto_punto2x");
var texto_p2y = document.getElementById ("texto_punto2y");

var texto_p3x = document.getElementById ("texto_punto3x");
var texto_p3y = document.getElementById ("texto_punto3y");

var boton = document.getElementById("botoncito");
boton.addEventListener("click", dibujoPorClick);
//*********************************************

var punto1x, punto1y, punto2x, punto2y, punto3x, punto3y;




function dibujoPorClick()
      {
        punto1x = parseInt(texto_p1x.value);
        punto1y = parseInt(texto_p1y.value);
        punto2x = parseInt(texto_p2x.value);
        punto2y = parseInt(texto_p2y.value);
        punto3x = parseInt(texto_p3x.value);
        punto3y = parseInt(texto_p3y.value);

        condicionTriangulo(punto1x,punto1y,punto2x,punto2y,punto3x,punto3y);

      }


function condicionTriangulo (punto1x,punto1y,punto2x,punto2y,punto3x,punto3y)
    {

    if ( punto1x <= punto2x && punto1x != punto2x)
        {
          console.log ("se ejecuto el IF"+": condicion 1 " + (punto1x <= punto2x) + "condicion 2"+ (punto1x != punto2x) );
          ecuacion_recta(punto1x,punto1y,punto2x,punto2y,punto3x,punto3y);

        }

    else if (punto2x < punto1x)
        {
          console.log("se ejecuto el ELSE-IF");
          ecuacion_recta(punto2x,punto2y,punto1x,punto1y,punto3x,punto3y);

        }
    else if   (punto1x < punto3x)
        {
          console.log("se ejecuto el ELSE");
          ecuacion_recta(punto1x,punto1y,punto3x,punto3y,punto2x,punto2y);

        }
    else
        {
          console.log("se ejecuto el ELSE");
          ecuacion_recta(punto3x,punto3y,punto1x,punto1y,punto2x,punto2y);

        }
      }




function  pendiente (x1,y1,x2,y2) // se obtiene el valor de la pendiente que es utilizado en funcion: ecuacion_recta
    {
      var primera_resta;
      var segunda_resta;
      var resultado;

      primera_resta = x2-x1;
      segunda_resta = y2-y1;
      resultado = segunda_resta/primera_resta;
      return resultado;
    }


function ecuacion_recta(x1,y1,x2,y2,x3,y3) // ecuación de la recta para determinar los puntos a trazar
    {
      var m;
      var ecu_x;
      m = pendiente(x1,y1,x2,y2); //llamdo de la funcion pendiente
      console.log("Dato: la pendiente de la recta es:" + m);
        for (x=x1;x <= x2 ;x++)
        {

          ecu_x = (x*m)+(m*-(x1))+y1;
          dibujarLinea ("#AAF",x,ecu_x,x3,y3);
        }

    }

function dibujarLinea(color, x_inicial, y_inicial, x_final, y_final)
    {
      lienzo.beginPath(); /* incializa la función para el trazado   */
      lienzo.strokeStyle = color; /* declaramos el color de la linea*/
      lienzo.moveTo(x_inicial, y_inicial); /* movemos el focus al punto inicial*/
      lienzo.lineTo(x_final, y_final);/* trazamos una linea del punto declado al punto insertado en la función*/
      lienzo.stroke(); /* cerramos el stilo*/
      lienzo.closePath(); /* cerramos la función*/
      return 0;
    }

siendo sincero, soy programador, pero no me dedico de lleno a programar ya que también me gusta el diseño gráfico…y bueno, no tengo la destreza que desearía para realizar proyectos serios. Por eso estoy empezando nuevamente con lo básico, con cosas que ya he visto, pero tengo que decir que esto es un diferencial enorme que tiene platzi…hice mil cursos, pero nadie nadie se toma el tiempo que se toma freddy de explicar los por que de cada linea y sentencia…la lógica de los algoritmos (que es algo que en realidad debería enseñarse antes que cualquier lenguaje, aprender a pensar un problema deslozandolo por partes, es el cáliz de un programador) y así poder entender todo de manera correcta. Aplausos para Freddy!

El elemento HTML form (<form>) representa una sección de un documento que contiene controles interactivos que permiten a un usuario enviar información a un servidor web.

El elemento <input>, teniendo el valor “reset” en su atributo type, representa un botón que, cuando es presionado, restaura todos los campos del formulario (<form>) al cual pertenece, a sus valores iniciales.

El método .clearRect convierte todos los pixeles en el espacio definido por el punto de inicio (x, y) y tamaño (width, height) a negro transparente, borrando cualquier contenido dibujado anteriormente.

50.png
51.png
52.png
Captura de pantalla (33).png
capture-desafio-II.jpg
capture-desafio-I.jpg

Aqui tienen mi ejemplo para que comparen.
ejemplo de cavas.png

Y el codigo
codigo 1.png
codigo 2.png

No puedo creer lo rápido que se avanza con este curso

En este proyecto, el usuario podrá:

  1. Ajustar a su gusto el “ancho” y el “alto” del canvas y el código funcionará de manera simétrica acomodándose a dichos ajustes.
  2. Elegir cuántas líneas desea en cada extremo del área de dibujo en el momento de dibujar la “malla”.
  3. Decidir si aparte de la malla también desea dibujar 5 estrellas.
  4. Además, decidir si también desea dibujar cuadros en el centro de cada estrella.
1 Imag Desafiío 6.png
2 Código Desafío 6.png
canvas1.png
canvas.png

Este es miresultado final. Para formar la estrella tuve algunas complicaciones pero fue cuestion de paciencia “prueba error” tener en cuenta que error habia cometido y no volver a cometerlo. Me gusto mucho esta clase.
Hola.PNG

Mi resultado, le agregue un botón para limpiar la pantalla, lo que en realidad hace es refrescar la pagina.

eventoshtml.png
retoPart1.PNG
retoPart2.PNG
reto.PNG

No sé por qué presiento que la mayoría de ustedes no son Noobs en esto 😛

Encontré una forma para que al darle click el dibujo se reinicie, sin necesidad de recargar la página. Con este comando:

lienzo.clearRect(0, 0, ancho, alto);

El dibujo se reseteara cada vez que apretemos el botón, logrando una apariencia más agradable a la que tenemos (en la que cada vez que apretamos el botón los dibujos se superponen).

Para hacerlo más profesional como dice Freddy, en vez de poner 300x300, utilizamos la variable “ancho” que creamos y creamos una nueva que “alto”, que se declara de la siguiente forma:

var alto = d.height;

Espero les sirva. Saludos!

Hola, por favor den un like.

Porque soy un niño de 13 años.

En la caja de texto pongo que me dibuje 10 líneas por ejemplo y me las hace.

Luego si le pongo que me haga 5, no me borra  las líneas

anteriores. Como se puede hacer para que me deje limpio el

lienzo antes de volver a dibujar otras líneas ? 

el curso esta re bueno y debo admitir que en ocasiones tengo que repetir los videos para entenderlos bien 😄 saludos freddy eres muy bueno para enseñar!!!

id= "Es la forma en la que JavaScript decide como acceder a la variable. Es el nombre en JavaScript de la etiqueta en HTML"

Aquí les comparto!
![](Captura de pantalla (58).png

Hola Lenny,… el principal requisito para entrar en este mundo es que tengas ganas de aprender y el segundo es que nunca pierdas el interés por avanzar sin importar la velocidad que tengas. En este mundo no existen barreras, solo las que nos impongamos a nosotros mismos. Si estudias y practicas sin parar, verás cómo se expande tu mundo y tu mente a millón 😉

Para mi esto es nuevo, nunca había estudiado programación, y me gusta, así que no me rendiré. Quiero poder aprender y mejorar mis ingresos. Ademas de superarme a mi misma cada día.

Screenshot_5.png

En el minuto 19, Freddy habla sobre como los ingenieros tardamos meses en aprender a programar codigo así de complejo iniciando desde cero en la universidad, “ESTOY TOTALMENTE DE ACUERDO” a tal grado de frustración se llega a veces que acabas odiando la programación y crees que esto no será lo tuyo, Gracias Freddy por regresar mis ánimos.

http://codepen.io/emilianoduran/pen/qajJQW

me quedo asi :

Captura1.PNG

🐱‍💻 Experimentando con los conocimientos adquiridos.
pacman.png

Una pequeña reflexion de mis últimos errores. 

  • Hasta ahora el codigo no me ha funcionado porque he escrito un ID y cuando quería hacer referencia del mismo en javascript escribi algo mal.
  • Porque me ha faltado colocar el símbolo (=) en alguna parte.
  • El punto y coma.
  • No coloque la mayúscula en una parte de en un atributo de variable.
  • etc.


Si los que saben pasan la mayor parte de su tiempo leyendo el código para corregir errores o entender como continuar que sera de los que estamos comenzando. 


Les deseo mucho ánimo y paciencia. Y recuerden que casi en el 100% de los casos si algo no les esta saliendo bien no es culpa del editor de texto, la computadora o el navegador. Revisa el codigo y si ya lo revisaste entonces revisalo de nuevo++.

Tengo 73 años, soy licenciado en Finanzas de Empresas, jubilado. Siempre tuve una habilidad innata para crear sistemas. En los 70’s desarrollé, desde la nada, un sistema de Control y Facturación de almacenes, cuando casi no existía algo así, por lo menos en Argentina. Luego desarrollé un sistema para Compras en una enorme empresa de gastronomía y varios sistemas más; en todos ellos tuve la enorme colaboración de un Jovencito muy capaz que programaba como los dioses. Cuando me separé de él dejé de desarrollar sistemas. Ahora, 40 años después, estoy estudiando con muchísimo interés Programación para poder volver a Crear sistemas. Con este curso de Platzi estoy viendo que a pesar de que pasaron 40 años lo voy a lograr. SI SE PUEDE.

Si no quieren tener que recargar la página cada vez que van a presionar el botón para que se borren las lineas del canvas pueden utilizar la siguiente sentencia al iniciar la función dibujoPorClick():

lienzo.clearRect(0,0,300,300);

Ejemplo:

function dibujoPorClick(){
  lienzo.clearRect(0,0,300,300);
  var linea=parseInt(t.value);
  var espacio=ancho/linea;
  var l=0;
  do{
    dibujarLinea("gray", 300,0+l*espacio,290-l*espacio,300);
    l++;
  }while (l<linea);
}```

Datos importantes del video:

  1. Recuerden que SIEMPRE lo que se optiene del campo de texto es un String
    2.Si van a hacer uso de una función en un evento no lleva los Paréntesis
    3.Con el Id acceden a los objetos HTML desde JavaScript
    4.Las funciones pueden o no recibir parámetros
    5.Con el <br/> Dan un salto de linea al texto en HTML
    6.Nunca olviden poner el punto y coma(😉

Manito arriba si al igual que yo aprendes Haciendo!
PD: Gracias Freddy!

Después de muchísimas horas de trabajo.

Dibujando estrellas.png

HTML

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Dibujando con canvas</title>
  </head>
  <body>
    <h1>Dibujo en canvas</h1>
    <p>¿Cuántas líneas quieres?
      <br />
      <br />
    <label>Número de líneas </label> <input type="text"maxlength="2"onkeypress="return keyPressValidation(event)"id="texto_lineas" />
    <br />
    <br />
    <label>Número de iteraciones </label><input type="text"maxlength="2"onkeypress="return keyPressValidation(event)"id="iterar" />
    <br />
    <br />
    <label>Pixeles min 300 máx 1000 </label><input type="range"min="300"max="1000"value="300"list="range_datalist"id="rango"/>
    <br />
    <br />
    <input type="button" value="Dibujar" id="boton"/>
    <input type="button" value="Recargar" id="refresh"/>
    <datalist id="range_datalist">
      <option value="300">300</option>
      <option value="400">400</option>
      <option value="500">500</option>
      <option value="600">600</option>
      <option value="700">700</option>
      <option value="800">800</option>
      <option value="900">900</option>
      <option value="1000">1000</option>
    </datalist>
    </p>
    <canvas id="dibujito" width="300" height="300"></canvas>
    <p>Así queda tu dibujo</p>
  <input type="text"placeholder="Total Iteraciones"readonly"true" id="resultado" />
  </body>
  <script type="text/javascript" src="dibujito.js">
  </script>
</html>

JAVASCRIPT

// Autor: ernanvr
// 21/04/2020

var texto = document.getElementById("texto_lineas")
var boton = document.getElementById("boton");
var height_width = document.getElementById("rango")
var rango_minimo = height_width.value;
var iteracion = document.getElementById("iterar")
var recarga = document.getElementById("refresh")
var contador = document.getElementById("resultado")

recarga.addEventListener("click", reinicio);//para refrescar página
boton.addEventListener("click", porClick);//para ejecutar el loop por click
texto.addEventListener("paste", onpaste);//para evitar que se pegue texto
rango.addEventListener("change", onchange);//para actualizar página cuando hay cambio de tamaño de lienzo
iteracion.addEventListener("paste", onpaste);


// Contador de iteraciones
 var acumulado = 0;




var d = document.getElementById("dibujito");
var lienzo = d.getContext("2d");
var ancho_lienzo = d.width;
var alto_lienzo = d.height;

// dibujando los marcos
  dibujarLinea("grey",1,1,1,ancho_lienzo-1)
  dibujarLinea("grey",1,ancho_lienzo-1,ancho_lienzo-1,ancho_lienzo-1)
  dibujarLinea("grey",1,1,ancho_lienzo-1,1)
  dibujarLinea("grey",ancho_lienzo-1,1,ancho_lienzo-1,ancho_lienzo-1)

// Loop para interar de acuerdo al box con el número de iteraciones
function porClick(){
  acumulado = parseInt(iteracion.value) + acumulado;
  if (iteracion== 0) {
    return false
  } else {
  for (var i = 0; i < iteracion.value; i++) {
      CrearAleatorio()

  }
  contador.value = "Iteraciones acumuladas " + acumulado;
  contador.disabled = true;
}
}

function dibujarLinea(color, x_inicial, y_inicial, x_final, y_final) {
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.moveTo(x_inicial,y_inicial)
  lienzo.lineTo(x_final,y_final)
  lienzo.stroke();
  lienzo.closePath();
}

// Función para crear las estrellas
function CrearAleatorio () {
  document.getElementById("rango").disabled = true;
  var lineas = parseInt(texto.value);
  var espacio = (ancho_lienzo/(2*height_width.value/rango_minimo)/lineas);// ecuación de la variable espacio debe ajustarse a los distintos áreas
  var l = 0;
  var yi, xf;
  var xi, yf;
  var size = Math.floor((Math.random()*3)+1);
  var positionx = randomBetween(-250*height_width.value/rango_minimo,250*height_width.value/rango_minimo);
  var positiony = randomBetween(-250*height_width.value/rango_minimo,250*height_width.value/rango_minimo);
  var color_estrella;
  colorAleatorio();
  // Loop para crear las estrellas en los 4 cuadrantes que la componen
    do {
      yi = espacio * l ;
      xf = (alto_lienzo/2)-(espacio * (l + 1));
      xi = alto_lienzo/2;
      yf = alto_lienzo/2;
      dibujarLinea(color_aleatorio,(xi/size)+positionx,(yi/size)+positiony,(xf/size)+positionx,(yf/size)+positiony);
      yi = espacio * l ;
      xf = (alto_lienzo/2)+(espacio * (l + 1));
      xi = alto_lienzo/2;
      yf = alto_lienzo/2;
      dibujarLinea(color_aleatorio,(xi/size)+positionx,(yi/size)+positiony,(xf/size)+positionx,(yf/size)+positiony);
      yi = (alto_lienzo)-(espacio * l );
      xf = (alto_lienzo/2)-(espacio * (l + 1));
      xi = alto_lienzo/2;
      yf = alto_lienzo/2;
      dibujarLinea(color_aleatorio,(xi/size)+positionx,(yi/size)+positiony,(xf/size)+positionx,(yf/size)+positiony);
      yi = (alto_lienzo)-(espacio * l );
      xf = (alto_lienzo/2)+(espacio * (l + 1));
      xi = alto_lienzo/2;
      yf = alto_lienzo/2;
      dibujarLinea(color_aleatorio,(xi/size)+positionx,(yi/size)+positiony,(xf/size)+positionx,(yf/size)+positiony);
      l++;
    } while (l < lineas);
}

// Función para validar que solo se ingresen números. Raro que el asterisco
// no funciona en la expresión regular, tiene que usarse el signo +
function keyPressValidation(e) {
  var key = e.KeyCode || e.which;
  var teclado = String.fromCharCode(key);
  var prueba = /^[0-9]+/.test(teclado)

  if (prueba == false) {
    return false
  }
}

// Función para evitar que se utilice la opción pegar en la input box
function onpaste(e) {
e.preventDefault()
}

function onchange(e){
  d.width = height_width.value;
  d.height = height_width.value;
  ancho_lienzo = height_width.value;
  dibujarLinea("grey",1,1,1,ancho_lienzo-1);
  dibujarLinea("grey",1,ancho_lienzo-1,ancho_lienzo-1,ancho_lienzo-1);
  dibujarLinea("grey",1,1,ancho_lienzo-1,1);
  dibujarLinea("grey",ancho_lienzo-1,1,ancho_lienzo-1,ancho_lienzo-1);
  alert ("Longitud ha cambiado a "+height_width.value);
}

// Funcion para generar numeros aleatorios
function randomBetween(min, max) {
    if (min < 0) {
        return Math.floor(min + Math.random() * (Math.abs(min)+max));
    }else {
        return Math.floor( min + Math.random() * max);
    }
}

// Funcion para escoger colores aleatoriamente
function colorAleatorio (){
    var hexadecimal = ["green","blue","pink","red","blue","yellow"];
    color_aleatorio = hexadecimal[randomBetween(0,6)];
    return color_aleatorio
}

// Función del botón reinicio
function  reinicio () {
  location.reload()
}

Mi aporte
dibujo completo.jpg

++ SUPER RESUMEN DE ESTE VÍDEO Y DE LO APRENDIDO HASTA AHORA:++

Con utf-8 puedes poner caracteres raros. Con <p> puedes añadir párrafos, con <h1> títulos.En html da igual los espacios que pongas en el código, se separa mediante <br>. Con <input> puedes colocar diferentes elementos del formulario, como texto y button. El id es el nombre en javascript de la etiqueta en html, es lo que se pone en html para desde javascript acceder a ese código. value es el valor del boton ( si no sale una bolita sin nada).

Canvas es el lugar abierto donde podemos dibujar con JavaScript. Su ancho y alto lo determinamos nosotros. Sabemos cargar scripts externos. Con JavaScript obtenemos un elemento de html con .getElementById, y lo podemos guardar en una variable. Y esto es un objeto. Estos objetos en ocasiones pueden tener eventos, como el evento click, que disparan una función que declaras donde quieras. Esto se hace mediante un activador de eventos que se llama .addEventListener(). También podemos escribir en 2d o 3d, y se define por el contexto del canvas y lo gurdamos en un lienzo.

Hay funciones que reciben parámetros que definimos cuales y cuantos son.A su vez, hay funciones que no reciben parámetros y se disparan en según que casos. La forma de obtener el valor de un formulario (atributo) es con .value

“Botoncito es el nombre que tiene en html” , boton es la variable en javascript en la que estoy haciendo todo esto. Es buena práctica no llamarlo todo igual. También, es importante ser consistente en el nombre de las variables para cuando otros programadores trabajen contigo. Ejemplo: llamar variables txt_lineas txt_circulos … no llamarlos txt_lineas y textocirculos, porque será más complicado de entender.

En JavaScript puedes agregar un manejador de eventos con element.addEventListener(‘event’, function) , al poner la función, no la pones con paréntesis ,porque no quieres que se ejecute en ese momento, sino solo cuando el botón “quiera” , por eso es que la nombras y la dejas ahí como en espera.

Los programadores no piensan en un problema grande, sino que lo desglosan en problemas pequeños. En este caso, con el numero de lineas en la caja de texto:

  1. Al darle click, que pase algo.

  2. ¿Cómo obtener el numero de lineas y como lo meto en una variable?

  3. ¿Cómo hago para que esto se dibuje solo cuando le doy click después de obtener el número?
    4.¿Cómo hago para que las líneas sean las del número?

  4. Resuelto con alert

  5. Mediante el atributo texto.value de la caja de texto (no puedes poner texto directamente pues esto incluye toda la caja del html), y transformando el string en un número mediante ParseInt

  6. Cortando y pegando todo el código a partir de declarar las líneas hasta dibujar las líneas del borde dentro de la función dibujoPorClick. ÁMBITO

  7. Cambiando el valor de la variable líneas de 30 a la variable xxx, o directamente eliminando esta y poniendo su contenido. var líneas = parseInt(texto.value). Aun así, esto no es suficiente y se va a quedar limitado porque nosotros diseñamos el canvas como 300 / 30 (lineas), pero este numero 30 cambia según lo que pone el usuario, así que en vez de multiplicar 10*l , multiplicamos (300/lineas) * l. Y así, estaría resuelto.Pero, si quieren hacerlo bien, declaren la variable ancho = d.width // al ver su valor (300) , pueden declarar otra variable dentro de dibujoPorClick llamada espacio = (ancho / lineas), y sustituir aquellos lugares donde pusimos 10 por espacio.

CONCEPTO DE ÁMBITO

Las variables que declaramos dentro de una función solo se mantienen con vida dentro de las llaves, si la declaramos dentro de la función en dibujoPorClick , esta variable nunca estará disponible en dibujarLinea

ESPECIAL MENCIÓN A : console.log(“”) , nuestro super poder que permite mandar mensajes de depuración a la consola del ordenador para poder ver como funciona el programa por dentro pero no afectar a la forma visual ni a lo que ve el usuario.

BUENAS PRÁCTICAS: Las etiquetas que se abren y no se cierran con otra como meta charset o input, normalmente es una buena práctica poner al final /> para indicar que se cierran.

Curvas.JPG

![](ahora con formulario.JPG

¡Hola a todos!

Aqui muestro como hice yo el proyecto. Me puse a curiosear con CSS y esto fue lo que ocurrio…

html
nombre: dibujo.html

<code>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Dibujando con Canvas</title>
  <style>
    body
    {
      /*Color del fondo del documento*/
      background: #f1ffc0;
    }
    .texto
    {
      /*Alineacion del texto*/
      text-align: center;

      /*Color del fondo*/
      background-color: rgba(243, 156, 243, 0.623);

      /*Tamaño del borde*/
      border-radius: 15px 7px 15px 7px;

      /*Color del borde*/
      border-color: blueviolet;

      padding: 5px 10px 5px;

      
    }

    .boton
    {
      /*alineacion*/
      text-align: center;

      /*color del fondo*/
      background-color: rgb(25, 208, 240);

      /*tamaño de los bordes*/
      border-radius: 15px 7px 15px 7px;

      /*color de los bordes*/
      border-color: rgb(5, 204, 240);

      padding: 10px 5px 10px 4px;
      margin: 2px;
    }

    canvas
    {
     border-radius: 150px; 
     background: #ee9feacc;
     position:relative;
     left:250px;
     top: -180px;
    }

    .texto_lienzo
    {
      color: #000000;
      position:relative; 
      top: -300px;
      left: 50px;
    }
      h1
      {
        width: 6cm;
        text-align: center;
        color: #f1410bea;
        border-radius: 10px;
        background: #be7edfa4;
        position: relative;
        left: 1cm;
      }
    .bot_tex
    {
      position: relative;
      left: 20px;
      margin-left: 5px;
      margin-top: 40px;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  
  <h1>Dibujando en Canvas</h1>
  <p class="bot_tex">
    ¿Cuantas lineas quieres? <br />
    <input type="text" class="texto"id="texto_lineas" />
    <input type="button" class="boton" value="A darle!" id="botoncito"/>
  </p>
  <canvas width="300" height="300" id="dibujito"></canvas>  
  <i class="texto_lienzo" id="icita"> ¡Este es tu lienzo!</i>
  
  <script src="dibujo.js"></script>
</body>
</html>

scrpit
nombre: dibujo.js

<code>
var boton = document.getElementById(“botoncito”);
var texto= document.getElementById(“texto_lineas”);
boton.addEventListener(“click”, dibujoPorCLick);

var d = document.getElementById(“dibujito”);
var ancho = d.width;
var lienzo = d.getContext(“2d”);

function dibujarLinea(color, x_inical, y_inicial, x_final, y_final)
{
lienzo.beginPath();
lienzo.strokeStyle = color;
lienzo.moveTo(x_inical, y_inicial);
lienzo.lineTo(x_final, y_final);
lienzo.stroke();
lienzo.closePath();
}

function dibujoPorCLick()
{

var lineas = parseInt(texto.value);
var l = 0;
var yi, xf, yf, xi;
var nxf, nyf;
var colorcito = “#ec1a1a80”;
var espacio = ancho / lineas;

for(l = 0; l < lineas; l++)
{
xf = espacio * (l + 1);
yi = espacio * l;
xi = espacio * l;
yf = espacio * (l + 1);
nxf = 300 - xi;
nyf = 300 - yf;

dibujarLinea(colorcito , 0, yi, xf, 300);
dibujarLinea(colorcito , xi, 0, 300, yf);
dibujarLinea(colorcito , xi, 300, 300, nyf);
dibujarLinea(colorcito , nxf, 0, 0, yf);

console.log("Lineas " + l)

}

dibujarLinea(colorcito, 1, 1, 1, 299);
dibujarLinea(colorcito, 1, 299, 299, 299);
dibujarLinea(colorcito, 299, 299, 299, 1);
dibujarLinea(colorcito, 299, 1, 1, 1);
}

Mi aporte:
Formularios.PNG

Mi aporte:
Un programa que puede modificar cantidad de lineas, jugar entre diferentes figuras y diferentes tamaños.Para cada uno de las figuras hice una función donde la llame en otra función que sería la que se llama en el addlistener.

1.PNG
2.PNG
3.PNG
4.PNG
5.PNG
6.PNG
7.PNG
8.PNG

nota1.pngnota2.png

<!DOCTYPE html>
<html>
   <head>
    <meta charset="utf-8" />
    <title>Dibujo libre con canvas</title>
    <style>
     body
     {
       background-color:grey;
       color:white;
       font-family: Helvetica;
     }
    </style>
   </head>
   <body>
      <h1>. . . . . . . . . . . . EXPRESATE DIBUJANDO . . . . . . . . . . .</H1>
      <P>
        Para crear tu obra de arte, haz lo siguiente:
        1. Escribe o selecciona el número de lineas que quieres dibujar.
        2. selecciona el número que corresponda al color que deseas.
        3. Haz click en el boton "Dibujar".
        4. Repite el proceso cuantas veces quieras, jugando con la cantidad de lineas y colores.
        5. El boton "Borrar todo", dejara tu hoja totalmente limpia.<br> <br>
        <script>
             document.write("______1. amarillo___2. azul___3. rojo___4. morado___5. aguamarina___6. violeta___7. naranja___8. fucsia ");
        </script> <br><br><br>
       <script>
        document.write(". . . Superior izquierdo . . . . Superior derecho . . . . . . Inferior izquierdo . . . . . . . Inferior derecho . . . . . . . . . .Elige el color, y cambialo cuantas veses quieras");
       </script> <br>
        <input type="number" id ="supe_izq"/>
        <input type="number" id ="supe_der"/>
        <input type="number" id ="infe_izq"/>
        <input type="number" id ="infe_der"/>
      . . . . . . . . . . . . .   <input type="number" id ="todos_colores"/> <br><br><br>
      <script>
       document.write(". . . Centro izquierdo . . . . . . . Centro derecho . . . . . . Centro superior  . . . . . . . . Centro inferior");
      </script>
      . . . . . . . . . . . . .  <input type="button" value = "Dibujar " id ="botoncito" />
      . . . . . . . . <input type="button" value ="Borrar todo" id ="boton_borrar" /> <br>
        <input type="number" id ="centro_izq"/>
        <input type="number" id ="centro_der"/>
        <input type="number" id="centro_mediosup"/>
        <input type="number" id="centro_medioinf"/> <br><br><br>
        <canvas>   </canvas>
        <canvas width="500" height="500" id = "imagen_grande"> </canvas>
      <P> Aqui esta tu obra de arte </p>
      <script src="dibujolibremio.js"> </script>
      </p>
   </body>
</html>
var texto1 = document.getElementById("supe_izq");
var texto2 = document.getElementById("supe_der");
var texto3 = document.getElementById("infe_izq");
var texto4 = document.getElementById("infe_der");

var textoc1 =document.getElementById("centro_izq");
var textoc2 =document.getElementById("centro_der");
var textocm1 =document.getElementById("centro_mediosup");
var textocm2 =document.getElementById("centro_medioinf");

var color1=document.getElementById("todos_colores");

var boton = document.getElementById("botoncito");
var botonborrartodo= document.getElementById("boton_borrar");

botonborrartodo.addEventListener("click", borrarporclick);
boton.addEventListener("click", dibujoPorClick1);
boton.addEventListener("click", dibujoPorClick2);
boton.addEventListener("click", dibujoPorClick3);
boton.addEventListener("click", dibujoPorClick4);

boton.addEventListener("click", dibujoPorClickc1);
boton.addEventListener("click", dibujoPorClickc2);
boton.addEventListener("click",dibujoPorClickcm1);
boton.addEventListener("click",dibujoPorClickcm2);

var g = document.getElementById("imagen_grande");
var anchog = g.width;
var altog =g.height;
var hoja = g.getContext("2d");

function dibujarLineag(color, xinicial, yinicial, xfinal, yfinal,)
{
  hoja.beginPath();
  hoja.strokeStyle = color;
  hoja.moveTo(xinicial, yinicial);
  hoja.lineTo(xfinal, yfinal);
  hoja.stroke();
  hoja.closePath();
}

function borrarporclick()
{
texto1.value="";
texto2.value="";
texto3.value="";
texto4.value="";
textoc1.value="";
textoc2.value="";
textocm1.value="";
textocm2.value="";
hoja.clearRect(0,0,anchog,altog);
}

function colores()
{
  if (color1.value == 1)
  {
    color="yellow";
  }
  else if (color1.value == 2)
  {
    color="blue";
  }
  else if (color1.value == 3)
  {
    color="red";
  }
  else if (color1.value == 4)
  {
    color="purple";
  }
  else if (color1.value == 5)
  {
    color="aquamarine";
  }
  else if (color1.value == 6)
  {
    color="violet";
  }
  else if (color1.value == 7)
  {
    color="orange";
  }
  else
    {
      color="fuchsia";
    }
}

function dibujoPorClick1()
{
  var lineas = parseInt(texto1.value);
  var espacio = anchog/lineas;
  var xi,yf
  colores(color1);
  var colorcito= color;

for (l=0; l<lineas; l++)
{
  xi= anchog-(espacio * l);
  yf= espacio * (l+1);
  dibujarLineag(colorcito,xi,0,0,yf);
  console.log("linea " + 1);
  dibujarLineag(colorcito,1,anchog-1,1,1);
  dibujarLineag(colorcito,1,1,anchog-1,1);
  texto1.value="";
}
}

function dibujoPorClick2()
{
  var lineas = parseInt(texto2.value);
  var espacio = anchog/lineas;
  var anchito = anchog-espacio;
  var xi,yf
  colores(color1);
  var colorcito =color;

for (l=0; l<lineas; l++)
{
  xi= anchito-(espacio * l);
  yf= anchog-(espacio * l);
  dibujarLineag(colorcito,xi,0,anchog,yf);
  console.log("linea " + 1);
  dibujarLineag(colorcito,1,1,anchog-1,1);
  dibujarLineag(colorcito,anchog-1,1,anchog-1,anchog-1);
  texto2.value="";
}
}

function dibujoPorClick3()
{
  var lineas = parseInt(texto3.value);
  var espacio = anchog/lineas;
  var yi,xf
  colores(color1);
  var colorcito =color;

for (l=0; l<lineas; l++)
{
  yi= espacio * l;
  xf= espacio * (l+1);
  dibujarLineag(colorcito,0,yi,xf,anchog);
  console.log("linea " + 1);
  dibujarLineag(colorcito,1,1,1,anchog-1);
  dibujarLineag(colorcito,1,anchog-1,anchog-1,anchog-1);
  texto3.value="";
}
}

function dibujoPorClick4()
{
  var lineas = parseInt(texto4.value);
  var espacio = anchog/lineas;
  var anchito = anchog-espacio;
  var xi,yf
  colores(color1);
  var colorcito =color;

for (l=0; l<lineas; l++)
{
  xi= espacio * l;
  yf= anchito-(espacio * l);
  dibujarLineag(colorcito,xi,anchog,anchog,yf);
  console.log("linea " + 1);
  dibujarLineag(colorcito,1,anchog-1,anchog-1,anchog-1);
  dibujarLineag(colorcito,anchog-1,anchog-1,anchog-1,1);
  texto4.value="";
}
}

function dibujoPorClickc1()
{
  var lineas = parseInt(textoc1.value);
  var mitadancho = anchog/2;
  var mitadalto= altog/2;
  var espacioancho = mitadancho/lineas;
  var xf,yf;
  colores(color1);
  var colorcito =color;

for (l=0; l<lineas; l++)
{
  xf= mitadancho;
  yf= 125+(espacioancho*l);
  dibujarLineag(colorcito,125,mitadalto,xf,yf);
  console.log("linea " + 1);
  dibujarLineag(colorcito,mitadancho,125,125,mitadalto-1);
  dibujarLineag(colorcito,125,mitadalto-1,mitadancho-1,altog-125);
  textoc1.value="";
}
}

function dibujoPorClickc2()
{
  var lineas = parseInt(textoc2.value);
  var mitadancho = anchog/2;
  var mitadalto= altog/2;
  var espacioancho = mitadancho/lineas;
  var xf,yf
  colores(color1);
  var colorcito =color;

for (l=0; l<lineas; l++)
{
  xf= mitadancho;
  yf= 125+(espacioancho*l);
  dibujarLineag(colorcito,375,mitadalto,xf,yf);
  console.log("linea " + 1);
  dibujarLineag(colorcito,mitadancho,125,375,mitadalto-1);
  dibujarLineag(colorcito,375,mitadalto-1,mitadancho-1,altog-125);
  textoc2.value="";
}
}

function dibujoPorClickcm1()
{
var lineas = parseInt(textocm1.value);
var espacio = anchog/lineas;
var mitadancho = anchog/2;
var xf,yf
colores(color1);
var colorcito =color;

for (l=0; l<lineas; l++)
{
  xf=espacio* l;
  yf= altog;
  dibujarLineag(colorcito,mitadancho,0,xf,yf);
  console.log("linea " + 1);
  dibujarLineag(colorcito,1,anchog-1,anchog-1,anchog-1);
  textocm1.value="";
}
}

function dibujoPorClickcm2()
{
var lineas = parseInt(textocm2.value);
var espacio = anchog/lineas;
var mitadancho = anchog/2;
var xf,yf
colores(color1);
var colorcito =color;

for (l=0; l<lineas; l++)
{
  xf=espacio* l;
  yf= 0;
  dibujarLineag(colorcito,mitadancho,altog,xf,yf);
  console.log("linea " + 1);
  dibujarLineag(colorcito,1,1,anchog-1,1);
  textocm2.value="";
}
}

Hola!! Logré que el usuario elija la cantidad de lineas, los colores y tenga la opción de borrar el dibujo. Saludos
canvascode_1.png
canvascode_2.png
dibujo_canvas.png

buenas a todos.

les comparto mi código para hacer las lineas con la cantidad que quieran y con algunos colores dentro de una caja de selección.

espero me comenten que les parece. 

________________________________________________

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 <br />

      <input type= "text" id="texto_lineas"/>

      <select id = "colorsote">

        <option value="red"> rojo </option>

        <option value="blue"> azul </option>

        <option value="lawngreen"> verde </option>

        <option value="yellow"> amarillo </option>

        <option value="pink"> rosa </option>

        <option value="darkorchid"> violeta </option>

      </select>

      <input type= "button" value="a darle" id="botoncito"/>

    </p>

    <canvas width="500" height="500" id="dibujito"></canvas>

    <p>Asi queda tu dibujo</p>

    <script src="dibujo.js"></script>

  </body>

</html>

________________________________________________

JAvascript


var texto = document.getElementById("texto_lineas");

var boton = document.getElementById("botoncito");

var opciones_color = document.getElementById("colorsote")

var captura = "red";

opciones_color.addEventListener("change", function (){

  captura = opciones_color.value;


});

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();

}


dibujarLinea(captura, d.width - 1,1,d.width-1,d.height);

dibujarLinea(captura, 1,1,d.width - 1,1);

dibujarLinea(captura, 1,1,1,d.height);

dibujarLinea(captura, 1,d.height - 1,d.width - 1,d.height - 1);


function dibujoporClick()

{

  var lineas = parseInt(texto.value);

  var l = 0;

  var yi, xf;

  var xi, yf;

  var colorsito = captura;

  var espacio = ancho / lineas;


  d.width = d.width;

  d.height = d.height;


  dibujarLinea(captura, d.width - 1,1,d.width-1,d.height);

  dibujarLinea(captura, 1,1,d.width - 1,1);

  dibujarLinea(captura, 1,1,1,d.height);

  dibujarLinea(captura, 1,d.height - 1,d.width - 1,d.height - 1);


  for (l = 0; l < lineas; l++)

  {

    yi = espacio * l;

    xf = espacio * (l + 1);

    dibujarLinea(colorsito,0,yi,xf,d.height);

  }


}

 

Lo logré!!
Ejercicio platzi-dibujo.jpg
dibujo platzi.jpg

Por fín, después de mucho atormentar a mis neuronas.

Canvas.png

Y aquí está el código HTML

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <title>Drawing with Canvas</title>
    <link rel="stylesheet" href="">
    <script src="Canvas.js" type="text/javascript" charset="utf-8" async defer></script>
</head>

<body>
    <h1>This is a Canvas' design</h1>
    <form>
        Write a Canvas dimension in pixels
        <input id="txtDimension" class="inputBox" type="number" max="500">
        <br/>
        <br/> Indicates the number of lines?
        <input id="txtLines" class="inputBox" type="number" max="500">
        <br/>
        <br/> What color do you want?
        <input id="txtColor" class="inputBox" type="color">
        <br/>
        <br/> Choose the pattern
        <br/>
        <input id="radSquare" class="inputBox" type="radio" name="pattern" value="Square">Square
        <input id="radStar" class="inputBox" type="radio" name="pattern" value="Star">Star
        <br/>
        <br/>
        <input id="btnShow" class="actionButton" type="button" value="Show">
        <input id="btnClear" class="actionButton" type="reset" value="Clear">
    </form>
    <br/>
    <canvas id="myCanvas" width="300px" height="300px">The navigator does not support Canvas</canvas>
    <p>Voilà!</p>
</body>

</html>

Y el Javascript

var btnShowObject = document.getElementById("btnShow");
var btnClearObject = document.getElementById("btnClear");
btnShowObject.addEventListener("click", DrawCanvasDesign);
btnClearObject.addEventListener("click", ClearCanvas);

function DrawLine(canvasId, color, xStart, yStart, xFinal, yFinal) {
    var canvasElement = document.getElementById(canvasId);
    var canvasContext = canvasElement.getContext("2d");
    canvasContext.beginPath();
    canvasContext.strokeStyle = color;
    canvasContext.moveTo(xStart, yStart);
    canvasContext.lineTo(xFinal, yFinal);
    canvasContext.stroke();
    canvasContext.closePath();
}

function UpperLeft(dimension, lines, color, offset, adjust) {
    for (i = 0; i <= lines; i++) {
        var x = 0 + (i * offset);
        var y = lines * offset - i * offset;
        DrawLine("myCanvas", color, 0 + adjust, y + adjust, x + adjust, 0 + adjust);
    }
}

function UpperRight(dimension, lines, color, offset, adjust) {
    for (i = 0; i <= lines; i++) {
        var x = 0 + (i * offset);
        DrawLine("myCanvas", color, x, 0 + adjust, dimension, x + adjust);
    }
}

function BottomLeft(dimension, lines, color, offset, adjust) {
    for (i = 0; i <= lines; i++) {
        var x = 0 + (i * offset);
        DrawLine("myCanvas", color, 0 + adjust, x, x + adjust, dimension);
    }
}

function BottomRight(dimension, lines, color, offset, adjust) {
    for (i = 0; i <= lines; i++) {
        var x = 0 + (i * offset);
        var y = lines * offset - i * offset;
        DrawLine("myCanvas", color, x, dimension, dimension, y);
    }
}

function DrawCanvasDesign() {
    var txtDimensionObject = document.getElementById("txtDimension");
    var txtLinesObject = document.getElementById("txtLines");
    var txtColorObject = document.getElementById("txtColor");
    var radSquareObject = document.getElementById("radSquare");

    var desiredDimension = parseInt(txtDimensionObject.value);
    var desiredLines = parseInt(txtLinesObject.value);
    var desiredColor = txtColorObject.value;

    var offsetLine = desiredDimension / desiredLines;

    var canvasElement = document.getElementById("myCanvas");
    canvasElement.width = desiredDimension;
    canvasElement.height = desiredDimension;

    if (radSquareObject.checked == true) {
        var adjust = 0;
        UpperLeft(desiredDimension, desiredLines, desiredColor, offsetLine, adjust);
        UpperRight(desiredDimension, desiredLines, desiredColor, offsetLine, adjust);
        BottomLeft(desiredDimension, desiredLines, desiredColor, offsetLine, adjust);
        BottomRight(desiredDimension, desiredLines, desiredColor, offsetLine, adjust);
    } else {
        desiredDimension = desiredDimension / 2;
        offsetLine = offsetLine / 2;
        var adjust = desiredDimension
        UpperLeft(desiredDimension, desiredLines, desiredColor, offsetLine, adjust);
        UpperRight(desiredDimension, desiredLines, desiredColor, offsetLine, adjust);
        BottomLeft(desiredDimension, desiredLines, desiredColor, offsetLine, adjust);
        BottomRight(desiredDimension, desiredLines, desiredColor, offsetLine, adjust);
    }
}

function ClearCanvas() {
    var canvasElement = document.getElementById("myCanvas");
    var canvasContext = canvasElement.getContext("2d");
    var w = canvasElement.width;
    var h = canvasElement.height;
    canvasContext.clearRect(0, 0, w, h);
}
2.JPG
var texto = document.getElementById("texto_lineas");
var boton = document.getElementById("botoncito");
boton.addEventListener("click", dibujarporclick);

var d = document.getElementById("dibujito");
var lienzo = d.getContext("2d");

function dibujarLinea(rot)
{
  lienzo.beginPath();
  lienzo.strokeStyle = "blue";
  lienzo.ellipse(200, 200, 40, 170, rot, 0, 2 * Math.PI);
  lienzo.stroke();
  lienzo.closePath();
}

function dibujarporclick()
{
  var orb = parseInt(texto.value);
  for (rot = 0; rot <= Math.PI; rot = rot + (Math.PI / orb))
  {
    dibujarLinea(rot);
  }
}```

![](Captura de Pantalla 2019-09-29 a la(s) 5.54.37 p. m..png

platzi2.png

![](mi imagen en canvas.png

Aca hay un par mas de opciones para el atributo type=" " de la etiqueta <input/>:

"text" : define un texto de una sola linea.

"buttom" : define un botón clickeable.

"radio" : define un botón circular.

"checkbox" : define una checkbox.

"color" : nos brinda un selector de color.

 "date" : define una selector de fechas ( días, meses y años, sin hora).

"datetime-local": igual que el anterior pero nos permite brindar la hora.

"month": permite al usuario colocar solamente mes y año.

"email" : define un espacio para colocar un email.

"file": nos brinda un botón de seleccionar archivos ( para que el usuario pueda subir un archivo al sistema).

"image": define una imagen como un botón de enviar.

"number": cuadro en blanco donde solo se puede colocar números.

"password": define un campo de contraseña.

"range": define un selector deslizante de rango.

"url": define un campo para  colocar una URL.
Hola a todos!!! , Espero que estén excelente!! Me gusta e interesa demasiado aprender todos estos temas. Una de las formas que más me motivan es la competencia. Sergio, creador de Netux (StartUps de IOT para la Salud) me comentó que esa era la manera de desarrollar su habilidad. Competía con su socio para crear pequeños programas. Dicho esto, me gustaría compartir con personas que están aprendo cómo yo y podríamos ponernos de acuerdo para competir entre nosostros, interactuar y retroalimentar la experiencia de aprendizaje. ¿Quien se apuntaa??

El curso es muy interesante, pero para gente que no sabe nada de programación, es muy difícil. Llegué a la clase 15 y ya me perdí… creo que es demasiada información comprimida y no es fácil de asimilar.
Para gente que prefiere ir más lento, les recomiento otro curso básico gratis que está en Coursera.com. Se llama “programming foundations with JavaScript, Html y CSS” Dictado por la Universidad de Duke… más ordenada y paso a paso la información.
Gracias Freddy. Aprendí harto, pero se me hizo difícil seguirte. Es demasiada información.

Los programadores no piensan con problemas grandes y ¿oh! Qué vamos a hacer?

Piensan con problemas pequeñitos y cómo los desglosamos uno a uno!

Pero señor Freddy, sí es 2020 xD (Ya sé que lo grabó hace tiempo, ríanse de mi chiste

Mira, Freddy lo hice antes que tu en el video, y tengo 11 años¡ ![](Captura de Pantalla 2020-06-12 a la(s) 15.21.48.png

Mi aporte!
programita.PNG

Este es mi dibujo (la verdad cambie un poquito el código):
lienzo 1.jpg

Los nombres de los colores los encontré en esta dirección: https://www.w3schools.com/colors/colors_groups.asp

Código dibujaMallasEventuales.js:
var cajalineas = document.getElementById(“lacajalineas”);
var boton = document.getElementById(“elbotonlineas”);
var d = document.getElementById(“eldibujo”);
var ancho = d.width / 2;
var lienzo = d.getContext(“2d”);

function dibujaLinea(color, xIzquierda, yArriba, xDerecha, yAbajo) {
lienzo.beginPath();
lienzo.strokeStyle = color;
lienzo.moveTo (xIzquierda, yArriba);
lienzo.lineTo (xDerecha, yAbajo);
lienzo.stroke();
lienzo.closePath();
}

function clicBoton () {
lineas = parseInt(cajalineas.value);
delta = (ancho / lineas);

for (l = 0; l<ancho; l = l + delta) {
dibujaLinea(“springgreen”, l, ancho, ancho, ancho - delta - l);
dibujaLinea(“yellow”, ancho, ancho + delta + l, 2ancho - l, ancho);
dibujaLinea(“orangered”,l, ancho, ancho, ancho + delta + l);
dibujaLinea(“deepskyblue”, 2
ancho - l, ancho, ancho, ancho - delta - l);
console.log("Esta es la lína número " + l);
}
dibujaLinea(“springgreen”, ancho, 0, ancho, ancho);
dibujaLinea(“yellow”, ancho, ancho, ancho, 2ancho);
dibujaLinea(“orangered”, 0,ancho, ancho, ancho);
dibujaLinea(“deepskyblue”, ancho, ancho, 2
ancho,ancho);
//dibujaLinea(“azure”,ancho, 0, ancho, 2 * ancho );
//dibujaLinea(“azure”,0,ancho, 2 * ancho , ancho);
//alert(“Suave con ese mouse”); console.log(texto.value);
}

boton.addEventListener(“click”, clicBoton);

**y código html: **
<!DOCTYPE html>
<html>

<head>
<meta charset=“utf-8”>
<title>Primer dibujo con canvas</title>
<style type=“text/css”>
body{
background-color: black;
font-family: Helvetica;
color: azure;
}
</style>
</head>

<body>
<h1>Este es un Lienzo</h1>
<p>
Cuantas líneas quieres &nbsp
<input type = “text” id = “lacajalineas” value = “30”>
<input type = “button” id = “elbotonlineas” value = “Hágale”>
</p>
<canvas id=“eldibujo” width=“760” height=“760”></canvas>
<p>Fin del canvas</p>
<!–script src=“dibujo.js” charset=“utf-8”></script–>
<!–script src=“dibujoConFunciones.js” charset=“utf-8”></script–>
<!–script src=“dibujaMallas.js” charset=“utf-8”></script–>
<script src=“dibujaMallasEventuales.js” charset=“utf-8”></script>
</body>

</html>

Captura3.PNG

var texto1 = document.getElementById(“texto_figura”);
var texto = document.getElementById(“texto_lineas”);
var botton = document.getElementById(“botoncito”);
botton.addEventListener(“click”, dibujoPorClick);// addEventListener (escuhador de elementos) es para añadir al boton una funcion para ver cuando ocurre un evento

var d = document.getElementById(“dibujito”); //es un
var lienzo = d.getContext(“2d”); //es una función del objeto canvas y 2d significa segunda dimensión
var ancho = d.width;
var co = “#A367E2”;

dibujarLinea(co, 1,1,300,1);
dibujarLinea(co, 299,299,299,1);

dibujarLinea(co, 1,1,1,299);
dibujarLinea(co, 1,299,299,299);

function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal)
{
lienzo.beginPath(); //función para arrancar un trazo
lienzo.strokeStyle = color; //color de la linea es un atributo o propiedad del objeto lienzo
lienzo.moveTo(xinicial, yinicial); //función para mover el lapiz desde donde va a rrancar la linea
lienzo.lineTo(xfinal, yfinal); //función para trazar una linea
lienzo.stroke(); //función para cerra la linea
lienzo.closePath(); //función para parar eldibu
}

function dibujoPorClick()
{
var usuario = parseInt(texto1.value);
if(usuario == 1)
{
var lineas = parseInt(texto.value); //atributo “value” nos da el valor de una caja de texto
var yi, xf;
var espacio = ancho/lineas;

for (l= 1; l<= lineas;l++)
{
yi = espacio * l;
xf = 150 - (lespacio);
dibujarLinea("#19DCC6", 150, yi, xf,300);
console.log(“linea” + l); //depurar
}
for (l1 = 1; l1<= lineas; l1++)
{
yi = espacio * l1;
xf = 150 + (l1
espacio);
dibujarLinea("#19A1DC", 149, yi, xf,300);
}
}//1°if

if(usuario == 2)
{
var lineas = parseInt(texto.value); //atributo “value” nos da el valor de una caja de texto
var yi, xf;
var espacio = ancho/lineas;

for (l= 1; l<= lineas;l++)
{
yi = espacio * l;
xf = espacio * (l+1);
dibujarLinea("#4EF905 “, 300, yi, xf,0);
console.log(“linea” + l); //depurar
}
for (l1 = 1; l1<= lineas; l1++)
{
yi = espacio * l1;
xf = espacio * (l1+1);
dibujarLinea(”#EF0E0E ", 0, yi, xf,300);
}
}//2°if

if(usuario == 3)
{
var lineas = parseInt(texto.value); //atributo “value” nos da el valor de una caja de texto
var xi, yf;
var yi, xf;
var espacio = ancho/lineas;

for (l= 1; l<= lineas;l++)
{
xi = 300 - (lespacio);
yf = espacio
l;
dibujarLinea("#F96C05", xi,0, 0,yf);
console.log(“linea” + l); //depurar
}
for (l1 = 1; l1<= lineas; l1++)
{
yi = espaciol1;
xf = 300 - (l1
espacio);
dibujarLinea("#EDF905", 300,yi,xf,300);

}
}//3°if

} //functiondibujoporclick

//las funciones tienen que tener parentesis

Código para crear dos figuras donde el usuario puede elegir el numero de lineas de cada figura
![](Captura de Pantalla 2019-08-26 a la(s) 11.33.53 a. m..png

var texto = document.getElementById ("texto_linea");
var boton = document.getElementById ("botoncito");
boton.addEventListener("click",dibujoPorClick);
var textoDos = document.getElementById("texto_lineaDos");
var botonDos = document.getElementById("botoncitoDos");
botonDos.addEventListener("click",dibujoPorClickDos);
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 = "blue"
  var colorsote = "red"
  var espacio = ancho/(lineas*2)
  var xi, yf;

 for ( l= 0; l < lineas; l++ )
   {
   yi = (l* espacio)+ espacio ;
   xf = 300-(espacio *l) ;
   dibujarLinea (colorcito,300,yi,xf,300);//tome .5 para tomar la parte del pixel que me interesa

   yi = (l*espacio) ;
   xf = (espacio*l)+300 ;
   dibujarLinea (colorsote,300,yi,xf,300);

   yi = 600-(l* espacio) ;
   xf = 300-(espacio*l) ;
   dibujarLinea (colorsote,300.5,yi,xf,300.5);

   yi = (l* espacio)+300 ;
   xf = 600-(l* espacio) ;
   dibujarLinea (colorcito,300.5,yi,xf,300.5);
   }

}

  function dibujoPorClickDos ()
{

    var lineas = parseInt(textoDos.value);
    var l = 0;
    var yi, xf;
    var colorcito = "blue"
    var colorsote = "red"
    var espacio = ancho/(lineas*2)
    var xi, yf;

  for(l = 0;  l < lineas; l++)
    {
      xi= 600-(l*espacio)
      yi= l * espacio
      xf= 300 + (l* espacio)
      yf= 300 + (l* espacio)
      dibujarLinea (colorsote,xi,yi,xf,yf)

      xi= 600-(l*espacio)
      yi= 600-(l * espacio)
      xf= 300 -(l* espacio)
      yf= 300 +(l* espacio)
      dibujarLinea (colorcito,xi,yi,xf,yf)

      xi= l*espacio
      yi= 600-(l * espacio)
      xf= 300 -(l* espacio)
      yf= 300 -(l* espacio)
      dibujarLinea (colorsote,xi,yi,xf,yf)

      xi= l*espacio
      yi= (l * espacio)
      xf= 300 +(l* espacio)
      yf= 300 -(l* espacio)
      dibujarLinea (colorcito,xi,yi,xf,yf)
      }
}
Captura de pantalla (446).png

Me costo un poco, pero pudo lograrlo.

HTML

<!DOCTYPE html>
<html>
	<head lang="es">
		<meta charset="UTF-8"/>
		<title>PRACTICA 2</title>
		<link rel="icon" type="images/png" href="images/gato.png">
	</head>
	<body bgcolor="#000">
		<div style="text-align:center">
			<h1><font face="arial black" color="#fff">GRÁFICO DE LÍNEAS CON JAVASCRIPT</font></h1>
			<font color="#ffffff">
			<p>¿Cuántas líneas deseas?
			<input type="text" id="caja_texto"/ size="8"/>
			<br/><br/>
			<input type="button" value="START" id="botoncito_1"/>
			<input type="button" value="ERASE" id="botoncito_2"/>
			<input type="color" id="botoncito_3"/>
			<br/><br/>
			<canvas width="300" height="300" id="liencito"></canvas><br/>
			<p>Esta es tu obra maestra<br/>¡Sigue aprendiendo!</p>
			</font>	
		</div>
			<script src="figura.js"></script>
	</body>
</html>

JAVASCRIPT

var c_t=document.getElementById("caja_texto");
var b_s=document.getElementById("botoncito_1");
var b_e=document.getElementById("botoncito_2");
b_s.addEventListener("click", trazo_click);
b_e.addEventListener("click", borrar);

var a=document.getElementById("liencito");
var lienzo=a.getContext("2d");
var ancho=a.width;

function trazo_click()
{
	
	var lineas = parseInt(c_t.value);
	var espacio = ancho/lineas;
	var c_o=document.getElementById("botoncito_3").value;
	

	for(c_l=0; c_l<lineas; c_l++)
	{
		//GRÁFICO EXTERIOR-------------------------
		//INFERIOR IZQUIERDO.
		yi=espacio*c_l;
		xf=espacio*(c_l+1);
		trazar(c_o, 0, yi, xf, ancho);
		//SUPERIOR DERECHO.
		xi=espacio*c_l;
		yf=espacio*(c_l+1);
		trazar(c_o, xi, 0, ancho, yf);
		//SUPERIOR IZQUIERDO.
		yi=ancho-espacio*c_l;
		xf=espacio*(c_l+1);
		trazar(c_o, 0, yi, xf, 0);
		//INFERIOR DERECHO.
		xi=espacio*c_l;
		yf=(ancho-espacio)-espacio*c_l;
		trazar(c_o, xi, ancho, ancho, yf);

		//CÓDIGO DE LA ESTRELLA---------------------
		//2DO CUADRANTE.
		yi=espacio/2*c_l;
		xf=(ancho/2) + (espacio/2)*(c_l+1);
		trazar(c_o, ancho/2, yi, xf, ancho/2);
		//3ER CUADRANTE.
		xi=espacio/2*c_l;
		yf=(ancho/2) + (espacio/2)*(c_l+1);
		trazar(c_o, xi, ancho/2, ancho/2, yf);
		//1ER CUADRANTE.
		xi=espacio/2*c_l;
		yf=(ancho/2) - (espacio/2)*(c_l+1);
		trazar(c_o, xi, ancho/2, ancho/2, yf);
		//4TO CUADRANTE.
		yi=(ancho+espacio/2)-espacio/2*(c_l+1);
		xf=ancho/2 + espacio/2*(c_l+1);
		trazar(c_o, ancho/2, yi, xf, ancho/2);
	}
		//LÍNEAS SECANTES---------------------------
		trazar(c_o, 0, ancho/2, ancho, ancho/2);//línea secante horizontal.
		trazar(c_o, ancho/2, 0, ancho/2, ancho);//línea secante vertical.
}

function trazar(color, xinicial, yinicial, xfinal, yfinal)
{
	lienzo.beginPath();
	lienzo.strokeStyle=color;
	lienzo.moveTo(xinicial, yinicial);
	lienzo.lineTo(xfinal, yfinal);
	lienzo.stroke();
	lienzo.closePath();
}

function borrar()
{
	a.width=a.width;	
}

Yo le agregue color y figura

589ccf429f2e5b8b1cd22dc8b4bcf04d.png

lo pueden ver completo en https://cookiespex.github.io/Lineas-Rectas-Curvas/

Hice el programa tal y como se indica, el problema reside en que cada vez que el usuario pone otro número en la caja y le da al botón, el programa dibuja encima de las anteriores lineas. Por tanto, lo ideal sería que cada vez que le demos al botón, borre el antiguo y haga otro. De esta forma, no tener que estar recargando la página una y otra vez…
Yo busqué la forma para hacer esto y se tiene que utilizar la función clearRect que tiene cuatro parámetros (x,y, width y height). Así que si queríamos borrar todo el dibujo, solo tenemos que poner los ejes desde 0 y borrar todo el ancho y alto del canvas que está dentro de la variable lienzo. De forma que lienzo.clearRect(0,0,d.width, d.height). Y claro, esta función se tiene que ejecutar cada vez que hagamos click así que…
Captura.JPG

Captura de pantalla (11).png
DEspues de muchas tazas de cafe, de repetir la clase no se cuantas veces y tragarse la frustración. Lo logré!!!

Captura de pantalla (161).pngCaptura de pantalla (160).png

canvas con circulos.JPG
hice el ejercicio con el reto de pedirle al usuario una cantidad de circulos maxima hasta 5 =).

Canvas55555555.jpg

Si se quiere borrar el lienzo cada vez que se oprime el botón y evitar estar recargando la página cada vez que se quiera cambiar el numero de lineas, se puede utilizar el método clearRect dentro de la función que se ejecuta al oprimir el botón, de la siguiente forma:

lienzo.clearRect(0,0,AnchoLienzo,AltoLienzo);

Poco a poco ♥
Captura1.JPG

Dibujando en canvas.
canvas.png

Captura.PNG

// definir las caracteristicas del canvas
var d = document.getElementById(“dibujito”);
var lienzo = d.getContext(“2d”);
lienzo.fillStyle = “black”;
lienzo.fillRect(0, 0, d.width, d.height);
//definir las caracteristicas del input
var texto = document.getElementById(“texto_lineas”);
var dibujos = document.getElementById(“texto_dibujos”);
var boton = document.getElementById(“botoncito”);
boton.addEventListener(“click”, dibujarPorClick);

// definir la funcion de Dibujo
function dibujarLinea (color,xi,yi,xf,yf)
{
lienzo.strokeStyle = color;
lienzo.beginPath();
lienzo.moveTo(xi,yi);
lienzo.lineTo(xf,yf);
lienzo.stroke();
lienzo.closePath();
}

dibujarLinea(“White”, 150, 0, 150, 300);
dibujarLinea(“White”, 0, 150, 300, 150);
//definir la funcion para dibujar la torre.
var ancho = d.width;

function dibujarPorClick()
{
var cantidadLineas = parseInt(texto.value);
var cantidadDibujos = parseInt(dibujos.value);
var yIn, xFn, a, b, c, d;
var colorcito = “#FAA”;

if (cantidadDibujos == 1)
{
for (var i = 0; i < cantidadLineas; i++)
{
var espacio = (ancho/2) / cantidadLineas;
yIn = espacio * i;
a = 150 - yIn;
b = 150 + yIn;
c = 300 - yIn;
dibujarLinea(“Blue”, yIn, 150, 150, a);
dibujarLinea(colorcito, 150, yIn, b, 150);
dibujarLinea(“white”, yIn, 150, 150, b);
dibujarLinea(“Green”, 150, c, b, 150);
}
}
else if (cantidadDibujos == 2)
{
for (var i = 0; i < cantidadLineas; i++)
{
var espacio = ancho / cantidadLineas;
yIn = espacio * i;
xFn = espacio * (i+1);
a = 300 - yIn;
dibujarLinea(“Green”, 0, a, xFn, 0);
dibujarLinea(“white”, yIn, 0, 300, xFn);
dibujarLinea(“Blue”, yIn, 300, 300, a);
dibujarLinea(colorcito,0, yIn, xFn, 300);
}
}
else
{
for (var i = 0; i < cantidadLineas; i++)
{
var espacio = (ancho/2) / cantidadLineas;
yIn = espacio * i;
a = 150 - yIn;
b = 150 + yIn;
c = 300 - yIn;
dibujarLinea(“Blue”, yIn, 150, 150, a);
dibujarLinea(colorcito, 150, yIn, b, 150);
dibujarLinea(“white”, yIn, 150, 150, b);
dibujarLinea(“Green”, 150, c, b, 150);
}
for (var i = 0; i < cantidadLineas; i++)
{
var espace = ancho / cantidadLineas;
yIn = espace * i;
xFn = espace * (i+1);
d = 300 - yIn;
dibujarLinea(“Green”, 0, d, xFn, 0);
dibujarLinea(“white”, yIn, 0, 300, xFn);
dibujarLinea(“Blue”, yIn, 300, 300, d);
dibujarLinea(colorcito,0, yIn, xFn, 300);
}
}
}

<meta charset=“utf-8”/>

  • Permite agregar tilde, ñ, letras raras, etc…
  • h1 es un título
  • p es un párrafo
  • br salto en línea
  • input —> diferentes elementos de formulario
  • id = identificamos etiqueta en html que se pueda trabajar en JavaScript (+ el nombre)
  • value = valor del botón
  • canva = lugar abierto donde podemos dibujar con JavaScript, ancho y alto lo determina el usuario (TÚ) + su id
  • Podemos cargar script externos, (tienen un código + ordenado)
  • Obtienes un html usando getElementById y se puede guardar en una variable
  • El objeto puede tener un evento, que dispara una función
  • Se puede dibujar en 2d y **3d **utilizando el contexto de canvas —> getContext
  • Hay funciones que reciben parámetros
  • Como también hay funciones qué NO reciben parámetros u se disparan en casos especiales
  • parseInt convierte un texto en un número
canvas.png
SharedScreenshot6.jpg

Freddy diciendo al inicio de la clase que usemos el año real y no el 2020 usado como ejemplo.
Yo viendo la clase en el 2020 jaja

Untitled.png
Untitled 2.png
trabajo (1).jpg
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body
        {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background-color: black;
        color: white;
        text-align: center;
       
        }
        
        canvas{
            
             text-align: center;
        }
    </style>

    <title>Document</title>
</head>
<body>
    <h1><marquee>Dibujo en Canvas</marquee></h1>
    <P> 
        
        Desea su dibujo  :
        <input type="checkbox"  id="con_marco"/> <label for="con_marco"> Con marco </label>
        <input type="checkbox"  id="sin_marco"/> <label for="sin_marco"> Sin marco  </label> <br/>
        ¿Cuál color le gustraría ?
        <input type="color" id="color_image" onchange="cambioColor()"/>
        <br/>¿Cuántas líneas quieres? 
        <input type="text" id="txt_lineas"/>
        <input type="button" value="A darle" id="botoncito"/> <br/>
        
       
        <!-- ]<input type="button" value="done" id="changecolor" onclick="cambioColor()">  -->
    </P>
    <canvas width="300" height="300" id="dibujito"></canvas>
    <p>Mi primer dibujo</p>
    <script src="dibujo.js"></script>
</body>
</html>

En JSS fue este cóigo :

var boton= document.getElementById("botoncito");
var texto = document.getElementById("txt_lineas");
boton.addEventListener ("click",dibujoPorClick );
var check_marco = document.getElementById("con_marco");
check_marco.addEventListener("click",check);
var check_sinmarco = document.getElementById("sin_marco");
check_sinmarco.addEventListener("click",sincheck);
var color_fig;
// console.log(colorcito);

var d = document.getElementById("dibujito");
var lienzo = d.getContext("2d"); //Plano en 2d 
var ancho = d.width;

function cambioColor()
{
    var colorcito = document.getElementById("color_image");
     color_fig = colorcito.value;
}



function check(){
    if (check_marco.checked )
    {
        i=3;
        dibujarLinea("#2EFEF7",1,1,1,299)
        dibujarLinea("#2EFEF7",1,299,299,299)
        dibujarLinea("#2EFEF7",299,299,299,1)
        dibujarLinea("#2EFEF7",299,1,1,0) 
    }
    else{

       i=2;
    dibujarLinea("black",1,1,1,299)   
    dibujarLinea("black",1,299,299,299)
    dibujarLinea("black",299,299,299,1)
    dibujarLinea("black",299,1,1,1)

    }

    
}

function sincheck()
{
    i=2;
    dibujarLinea("black",1,1,1,299)   
    dibujarLinea("black",1,299,299,299)
    dibujarLinea("black",299,299,299,1)
    dibujarLinea("black",299,1,1,1)
}


function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal)
{

lienzo.beginPath();
    if( i ==2 ){
        lienzo.lineWidth = 3;
        
    }
    else if( i==3  )
    {
        lienzo.lineWidth = 1;
    }
    

lienzo.strokeStyle = color;
lienzo.moveTo(xinicial , yinicial);
lienzo.lineTo(xfinal ,  yfinal);
lienzo.stroke();
lienzo.closePath(); 

}

function dibujoPorClick()
{
    i=3;
 var lineas = parseInt(texto.value);
 var mitad_espacio = ancho/2;
 var espacio = mitad_espacio/lineas ;
 var l =0;
 var yi, xf;
 
console.log(color_fig);
    for(l= 0 ; l<lineas ; l++ )
    {
    yi=  (espacio)* l;
    xf= (espacio * (l+1))+ mitad_espacio;

    dibujarLinea(color_fig,150,yi,xf,150);
    } 

    for(l= 0 ; l<lineas ; l++ )
    {
    yi=  ancho -(espacio * l);
    xf= (espacio * (l+1))+ mitad_espacio;

    dibujarLinea(color_fig,150,yi,xf,150);
    } 

    for(l= 0 ; l<lineas ; l++ )
    {
    yi=   espacio* l;
    xf= mitad_espacio -(espacio * (l+1));

    dibujarLinea(color_fig,150,yi,xf,150);
    } 

    for(l= 0 ; l<lineas ; l++ )
    {
    yi=  ancho -(espacio * l);
    xf= mitad_espacio -(espacio * (l+1));

    dibujarLinea(color_fig,150,yi,xf,150);
    } 


}

Hola, Freddy. Te felicito por el curso y a la vez te doy las gracias por la enseñanza de calidad. Si me permites haré una sugerencia: sabemos que el tiempo en internet cuesta y enseñar todas las herramientas es muy complicado, así que mi consejo es que escriban un libro(virtual o PDF) completo por cada curso que hagan con el que los estudiantes podamos complementar más las clases. Espero sirva de algo mi sugerencia. Saludos.

Despues de muchos intentos logré poner la opción para que el usuario escoja el color de las lineas 😄

function dibujoPorClick()
{
  var lineas = parseInt(texto.value);
  var l = 0;
  var width_to_zero;
  var zero_to_width;
  var espacio = ancho / lineas;
  var escoge_color = document.getElementById("escoge_colorcito").value;
  for (l = 0; l < lineas; l++)
  {
      width_to_zero = ancho - (espacio * l);
      zero_to_width = espacio * l;
      dibujarLinea(escoge_color, 0, width_to_zero, zero_to_width, 0);
      dibujarLinea(escoge_color, zero_to_width, 0, ancho, zero_to_width);
      dibujarLinea(escoge_color, ancho, zero_to_width, width_to_zero, ancho);
      dibujarLinea(escoge_color, width_to_zero, ancho, 0, width_to_zero);
      console.log("Linea " + l);
  }
}
  //bordes
  dibujarLinea("blue", 1, 1, 299, 1);
  dibujarLinea("blue", 1, 1, 1, 299);
  dibujarLinea("blue", 1, 299, 299, 299);
  dibujarLinea("blue", 299, 1, 299, 299);

  //centro
  dibujarLinea("blue", 100, 100, 200, 100);
  dibujarLinea("blue", 100, 100, 100, 200);
  dibujarLinea("blue", 100, 200, 200, 200);
  dibujarLinea("blue", 200, 100, 200, 200);
Captura de pantalla (1).png
2020-04-07 (2).png
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    *{
      box-sizing: border-box;
    }
    section{
      height: 100vh;
      display: grid;
      grid-template-columns: minmax(auto, 400px);
      
      justify-content: center;
    }
    .d-grid{
      /* margin: 150px; */
      display: grid;
      grid-template: auto 100px auto / 1fr;
      justify-content: center;
      align-content: center;
    }

    .img-container{
      border-radius: 5px 5px 0 0;
      
      display: flex;
      justify-content: center;
    }
    .container{
      /* width: 300px; */
      width: 100%;
      justify-self: center;
      padding: 10px;
      border: 1px solid #f3f8fb;
      /* border-radius: 10px; */
      background-color: #f3f8fb;
    }
    canvas{
      width: 100%;
      height: 50vh;
      border-radius: 0 0 5px 5px;
      border: 1px solid #88d4ff;
    }
    .texto{
      width: 100%;
      margin: 5px 0;
      padding: 5px;
      border: none;
      border-radius: 5px;
      border: 1px solid #88d4ff;
    }
    .bg-platzi{
      background-color: #263f4e;
      padding: 5px;
      color: #fff;
      font-family: 'Lato', sans-serif;
    }
    .btn-platzi{
      width: 100%;
      margin: 5px 0;
      display: inline-block;
      border: none;
      color: #fff;
      cursor: pointer;
      outline: 0;
      padding: 5px 10px;
      font-weight: bold;
      background-color: #95ca3e;
      font-family: 'Lato', sans-serif;
      border-radius: 5px;
      border-bottom: 2px solid #669840;
    }
    .btn-platzi:hover{
      background-color: #a6d160;
    }
    .btn-platzi:active{
      margin-top: 7px;
      background-color: #608327;
      border: none;
    }
  </style>
  <title>Document</title>
  
</head>
<body>
  <section>
    <div class="hero d-grid">
      <div class="bg-platzi img-container">
        <div>
          <img class="" src="Logo-platzi.webp" alt="" class="img-fluid">
        </div>
        <div>
          <img class="" src="logotipo-platzi.webp" alt="" class="img-fluid">
        </div>
      </div>      
      <div class="container">
        <input id="texto" type="text" placeholder="Ingrese la cantidad de lineas deseada" class="texto">
        <input id="boton" type="button" class="btn-platzi" value="Añadir Lineas">
      </div>
      <canvas id="dibujo">
    </div>
  </section>

  </canvas>
  <script>

    var numerosInput = document.getElementById('texto')
    var cuadroDeDibujo = document.getElementById('dibujo')

    var boton = document.getElementById('boton')
    var lienzo = cuadroDeDibujo.getContext('2d')

    boton.addEventListener('click', añadirLineas)


    function añadirLineas(){
      const lineasTotales = numerosInput.value

      const BORRAR = ""

      const ALTURA = cuadroDeDibujo.height
      const ANCHURA = cuadroDeDibujo.clientWidth
      
      const cambioDePosicionY = ALTURA / lineasTotales
      const cambioDePosicionX = ANCHURA / lineasTotales

      const bordeIzquierdo = 0
      const bordeSuperior = 0

      var yInicial = bordeSuperior
      var xFinal = cambioDePosicionX

      // console.log(`este es lienzo.width: ${cuadroDeDibujo.width}`)
      for(var linea = 0; linea < lineasTotales; linea++){

        dibujarLinea(bordeIzquierdo, yInicial, xFinal, ALTURA)

        yInicial += cambioDePosicionY 
        xFinal += cambioDePosicionX

      }
      numerosInput.value = BORRAR
    }
    
    function dibujarLinea(xInicial, yInicial, xFinal, yFinal){
      lienzo.beginPath()
      lienzo.strokeStyle = '#95ca3e'
      lienzo.moveTo(xInicial, yInicial)
      lienzo.lineTo(xFinal, yFinal)
      lienzo.stroke()
      lienzo.closePath()
    }
  </script>
</body>
</html>

**Comparto mis resultados!! espero puedan hacer comentarios de enrrequecimiento compañeros.
**
muestra1.png

muestra2.png
<code>
                                  **HTML**
 <!DOCTYPE html>
<html>
<head>
	<title>Fugura</title>
	<meta charset="utf-8" />
</head>
<body>
	<h1>Formas geometricas</h1>
	<p>Ingresa el numero de lineas que conformaran cada figura <br/> <br/>
		<input type="texto" id="texto_figext" /> 
		<input type="button" value="Figuras Exteriores" id="figuras_exteriores" /> <br/> <br/>
		<input type="texto" id="texto_thorizontal" /> 
		<input type="button" value="Triangulos Horizontales" id="triangulos_horizontales" /> <br/> <br/>
		<input type="texto" id="texto_tvertical" /> 
		<input type="button" value="Triangulos Verticales" id="triangulos_verticales" />
	</p> 
	
	<canvas id="midibujo" width="300" height="300"></canvas>
	<script type="text/javascript" src="figura.js"></script>

	<p>Vusualizando el Resultado</p>

</body>
</html>
                      **  JAVASCRIPT**
var lineasFigext=document.getElementById("texto_figext");
var fExteriores=document.getElementById("figuras_exteriores");
fExteriores.addEventListener("click", figurasExteriores);

var lineasThorizontal=document.getElementById("texto_thorizontal");
var tHorizontales=document.getElementById("triangulos_horizontales");
tHorizontales.addEventListener("click", triangulosHorizontales);

var lineastvertical=document.getElementById("texto_tvertical");
var tVerticales=document.getElementById("triangulos_verticales");
tVerticales.addEventListener("click", triangulosVerticales);


var dimension=document.getElementById("midibujo");
var ancho=dimension.width;
var lienzo=dimension.getContext("2d");

function dibujarLinea(color, xinicial, yinicial, xfinal, yfina)
{
	lienzo.beginPath();
	lienzo.strokeStyle=color;
	lienzo.moveTo(xinicial,yinicial);
	lienzo.lineTo(xfinal,yfina);
	lienzo.stroke();
	lienzo.closePath();
}

function figurasExteriores()
{
	var lineasExteriores=parseInt(lineasFigext.value);
	var espacio_exterios=ancho/lineasExteriores;
	l=0;
while(l<lineasExteriores)
{
	yi=espacio_exterios*l;
	xf=espacio_exterios*(l+1);
	dibujarLinea("black", 0,yi, xf, 300);
	l++; 
}

for(l=0;l<lineasExteriores;l++)
{
	var xf=espacio_exterios+(espacio_exterios*l);
	var yi=300-(espacio_exterios*l);
	dibujarLinea("black",0,yi,xf,0);	
}

for(l=0; l<lineasExteriores; l++)
{
	var xi=espacio_exterios*l;
	var yf=espacio_exterios*(l+1);
	dibujarLinea("black", xi,0, 300, yf);
}

for(l=0; l<lineasExteriores; l++)
{
	var xf=290-(espacio_exterios*l);
	var yi=espacio_exterios+(espacio_exterios*l);
	dibujarLinea("black", 300,yi, xf, 300);
}

}

function triangulosHorizontales()
{
	var lineasHorizontales=parseInt(lineasThorizontal.value);
	var espacio_horizontales=ancho/lineasHorizontales;
	for(var l=0; l<=lineasHorizontales;l++)
{
	var xi=espacio_horizontales*l;
	var xf=300-(espacio_horizontales*l);
	dibujarLinea("red", xi, 0, xf, 300);
}
}

function triangulosVerticales()
{
	var lineasVerticales=parseInt(lineastvertical.value);
	var espacio_verticales=ancho/lineasVerticales;
	for(var l=0; l<=lineasVerticales;l++)
{
	var yi=espacio_verticales*l;
	var yf=300-(espacio_verticales*l);
	dibujarLinea("green", 0, yi, 300, yf);
}

}

![](Captura.JPG

Este es mi resultado despues de horas de trabajo
ejemplo 1.jpg

ejemplo.png

Hola Freddy, tu código tiene un problema, si escribes un valores de manera decreciente la imagen no se modifica, tienes que estar refrescando la página para escribir un nuevo valor, esto lo he solucionado colocando la siguiente línea de código justo al principio de la función dibujoPorClic:

function dibujoPorClic()
{
lienzo.clearRect(0, 0, d.width, d.height);

muy buen curso, un saludo.

Hola a [email protected]! Buenas tardes 😃 !!!
Les comparto lo que hice yo como ejercicio: El fractal del triángulo de Sierpinski.
Llegue a tardarme aproximadamente 1.5 semanas debido a estar haciendo prueba y error en el algoritmo matemático. No lo copie de nadie.
Me quedaron muchas dudas sobre FUNCTION a partir de este ejercicio, pero estas las colocaré en el área de preguntas.
Ánimo a [email protected] los que estén en medio de esta práctica. Busquen respuestas por aquí o por la web. Solo no se den por vencido.
Saludos!
2.jpg
7.jpg
8.jpg
9.jpg

![](Imagen1.png

Le aumente checkboxes
![](canv.png
Este es mi codigo
html:

<!DOCTYPE html>
<meta charset="utf-8" />
<html>
<head>
	<title>Diseño de Lineas</title>
</head>
<body>
	<h1>Dibujo en Canvas</h1>
	<p>
		Dibujar
		<input type="text" id="texto1" size=1> 
		lineas <br>
		<input type="checkbox" id="caja1"> 
		Esquina Superior Izquierda <br>
		<input type="checkbox" id="caja2">
		Esquina Superior Derecha  <br>
		<input type="checkbox" id="caja3">
		Esquina Inferior Izquierda <br>
		<input type="checkbox" id="caja4">
		Esquina Inferior Derecha  <br>
		<input type="button" id="boton1" value="Dibujar">
		<input type="button" id="boton2" value="Borrar">
	</p>
	<p>
		<canvas width=300 height=300 id="areaDib"></canvas>
	</p>
	<script type="text/javascript" src="dibLineas.js"></script>
</body>
</html>

js:

//variables
var canv=document.getElementById("areaDib");
var lienzo=canv.getContext("2d");
var texto=document.getElementById("texto1");
var boton_1=document.getElementById("boton1");
var boton_2=document.getElementById("boton2");
var caja_1=document.getElementById("caja1")
var caja_2=document.getElementById("caja2")
var caja_3=document.getElementById("caja3")
var caja_4=document.getElementById("caja4")
var nLineas;
var ancho=canv.width;
var alto=canv.height;
//eventos
boton1.addEventListener("click",dibtrazo);
boton2.addEventListener("click",borrar);


//funciones
function dibLinea(xi,yi,xf,yf,color)
{
lienzo.beginPath();
lienzo.strokeStyle=color;
lienzo.moveTo(xi,yi);
lienzo.lineTo(xf,yf);
lienzo.stroke();
lienzo.closePath();
}
function dibtrazo()
{
	nLineas=parseInt(texto.value);
	canv.width=canv.width

	for (var l=0;l<nLineas;l++) 
	{
		if (caja_1.checked==true)
		{
			dibLinea(0,alto-l*alto/nLineas,(l+1)*ancho/nLineas,0,"blue");
		}
		if (caja_2.checked==true)
		{
			dibLinea(l*ancho/nLineas,0,ancho,(l+1)*alto/nLineas,"blue");			
		}
		if (caja_3.checked==true)
		{
			dibLinea(0,l*alto/nLineas,(l+1)*ancho/nLineas,alto,"blue");		
		}
		if (caja_4.checked==true)
		{
			dibLinea(l*ancho/nLineas,alto,ancho,alto-(l+1)*alto/nLineas,"blue");		
		}
	}

	dibLinea(1,1,299,1,"blue");
	dibLinea(299,1,299,299,"blue");
	dibLinea(1,1,1,299,"blue");
	dibLinea(1,299,299,299,"blue");
}
function borrar()
{
	canv.width=canv.width
}

Como tip por si alguien no lo tiene, les comento que para limpiar el canvas sin necesidad de recargar la página agreguè lo siguiente en mi código:

d.width = d.width;
Básicamente lo que hace es asignar de nuevo el ancho del canvas al canvas. “d” es el nombre de mi variable a la que cargué el objeto canvas “dibujito”.

var d = document.getElementById('dibujito'); var ancho = d.width; var lienzo = d.getContext('2d');

y dentro de la funcion dibujoPorClick() es donde agrego la reasignación del ancho al canvas, para que cada que des click al boton, primero lo limpie y luego haga el dibujo con la nueva cantidad de líneas que se colocaron en el cuadro de texto. Mi diseño y código están en los comentarios anteriores a este, 😃

nuevo canvas.png
tarea canvas 2.JPG
<var cantidadLineas = document.getElementById('cantidadLineas');
var colorVela = document.getElementById('color');
var boton = document.getElementById('boton');

boton.addEventListener('click', dibujoPorClick);

var d = document.getElementById('dibujito');
var lienzo = d.getContext('2d');
var anchoLienzo = d.width;
var altoLienzo = d.height;


// Funcion para hacer uso del canvas
function dibujarLinea(color, xinicial, xfinal, yinicial, yfinal) {
    lienzo.beginPath();
    lienzo.strokeStyle = color;
    lienzo.moveTo(xinicial, yinicial);
    lienzo.lineTo(xfinal, yfinal);
    lienzo.stroke();
    lienzo.closePath();
}

function dibujo_olas(origenx, origeny, ancho, alto) {
    var xi = origenx;
    var xf = origenx - ancho;
    var yi = origeny - alto;
    var yf = origeny;


    for (var index = 0; index < ancho; index++) {

        dibujarLinea('blue', xi, xf - index, yi + index, yf);
        dibujarLinea('blue', xi, xi + index, yi + index, yf);
    }
}


function dibujo_barco(origenx, origeny, ancho, alto) {


    var xi = origenx;
    var xf = origenx - ancho;
    var yi = origeny - alto;
    var yf = origeny;
    for (var index = 0; index < ancho; index++) {
        dibujarLinea(colorVela.value, xi, xf - index, yi + index, yf);
        dibujarLinea(colorVela.value, xi, xf - ancho, yi, yf);
        if (index < 20) {
            dibujarLinea('brown', xi - index, xf - ancho + index, yf + index, yf + index);
            dibujarLinea('brown', xi - index, xf - ancho + index, yf + index, yf + index);
            dibujarLinea('brown', xi - index, xf - ancho + index, yf + index, yf + index);
        }

    }

}


function dibujoPorClick() {
    // limpiar el lienzo para evitar la acumulacion de dibujos.
    lienzo.clearRect(0, 0, anchoLienzo, altoLienzo);

    // variable para obtener el valor de ancho del canvas en entero
    var txt_cantidad = parseInt(cantidadLineas.value);
    dibujo_olas(200, 150, 20, 20);
    dibujo_olas(150, 150, 50, 50);
    dibujo_olas(100, 150, 20, 20);
    dibujo_olas(50, 150, 50, 50);


    dibujo_barco(txt_cantidad, 130, 50, 50);

}>

Mi tarea permite escoger ancho y alto del canvas, cantidad de lineas y color.
Este es el codigo HTML

<!DOCTYPE html>
<html>
<head>
<meta charset=“utf-8”>
<title>DIBUJANDO CON CANVAS</title>
</head>
<body>
<h1>Flor en CANVAS</h1>
<p>
Ancho del dibujo :
<input type=“text” id=“texto-ancho”/>
Alto del dibujo :
<input type =“text” id=“texto-alto”/>
Cantidad de líneas :
<input type=“text” id=“texto-lineas”/>
Color :
<input type=“text” id=“texto-color”/>
<input type=“button” value=“A darle” id=“botoncito”/>
</p>
<canvas id=“dibujito” width=600 height=600></canvas>
<p>asi queda la flor.</p>
<script src=“dibujo.js”>
</script>
</body>
</html>

El codigo javascript:

var texto=document.getElementById(“texto-lineas”);
var ancho=document.getElementById(“texto-ancho”);
var alto=document.getElementById(“texto-alto”);
var color=document.getElementById(“texto-color”);

var boton=document.getElementById(“botoncito”);
boton.addEventListener(“click”,dibujoPorClick);

var d=document.getElementById(“dibujito”);
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()
{

d.width=ancho.value;
d.height=alto.value;
var l=0;
var lineas = parseInt(texto.value);
var alto2 = parseInt(alto.value);
var ancho2= parseInt(ancho.value);
var colorcito = color.value;
var espaciox = ancho2/2 / lineas;
var espacioy = alto2/2 / lineas;
var ax,ay,bx,by;
console.log(ancho2,alto2,espaciox,espacioy,lineas);

for(l=0 ; l < lineas ; l++)
{
ax = espaciox * l;
ay = espacioy * l;
bx = espaciox * (l + 1);
by = espacioy * (l + 1);
dibujarLinea(colorcito,0,ay,bx,alto2/2);
dibujarLinea(colorcito,ax,0,ancho2/2,by);
dibujarLinea(colorcito,ancho2/2,alto2/2-ay,ancho2/2+bx,0);
dibujarLinea(colorcito,ancho2/2+ax,alto2/2,ancho2,alto2/2-by);

dibujarLinea(colorcito,0,alto2-ay,bx,alto2/2);
dibujarLinea(colorcito,ax,alto2,ancho2/2,alto2-by);

dibujarLinea(colorcito,ancho2/2,alto2/2+ay,ancho2/2+bx,alto2);
dibujarLinea(colorcito,ancho2/2+ax,alto2/2,ancho2,alto2/2+by);
}
//Dibuja bordes exteriores
dibujarLinea(colorcito,1,1,ancho2-1,1);
dibujarLinea(colorcito,ancho2-1,1,ancho2-1,alto2-1);
dibujarLinea(colorcito,1,1,1,alto2-1);
dibujarLinea(colorcito,1,alto2-1,ancho2-1,alto2-1);
//Dibuja bordes internos
dibujarLinea(colorcito,ancho2/2,1,ancho2/2,alto2);
dibujarLinea(colorcito,0,alto2/2,ancho2,alto2/2);
}

++Y los resultados:
++

![](flor1.png
flor2.png
flor3.png

skater4.PNG
skater2.PNG
cod15.PNG

Yo hice un botón para limpiar el canvas y evitar tener que recargar una y otra vez la pagina para volver a dibujar, espero que les sirva aquí dejo el código que use para crearlo:

Este es el html

<p>
      Limpiar canvas <br>
      <input type="button" value="Borrar" id="botonsito2"/>
    </p>```

Y este el js

var boton2 = document.getElementById(‘botonsito2’)
boton2.addEventListener(“click”, borrado)

function borrado() {
lienzo.clearRect(0,0,300,300);
}


No pidan ayuda sin mandar el código, chiques. Es muy dificil poder ayudar así.

Hola, una pregunta, ustedes realmente apenas están aprendiendo a programar? Porque es que estoy viendo que hacen unos codigos como profesionales, yo apenas le puedo seguir el paso a Freddy incluso algunas cosas no las entiendo y un video de 38 minutos se me convierte a mi en 2 horas.

un proyecto con canvas
https://github.com/juanda103/Tansform-in-Canvas
![]( Sin título.png)

TU LO CREAS , TU LO INVENTAS

Costó sangre, sudor y lágrimas pero salio!!! #VivaYo

HTML

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Dibujando</title>
  </head>
  <body>
    <h1>Dibujando con Canvas</h1>
    <p>¿Cuántas líneas quieres?
      <input type="text" id="texto_lineas"/>
      <input type="button" value="¡A darle!" id="botonaso"/>
    </p>
    <canvas id="boton" width="300" height="300"></canvas>
    <p>Así queda tu dibujo</p>
    <script src="boton.js">
    </script>
  </body>
</html>

JavaScript

var texto = document.getElementById("texto_lineas");
var boton = document.getElementById("botonaso");
boton.addEventListener("click", dibujoPorClick);

var d = document.getElementById("boton");
var lienzo = d.getContext("2d");
var ancho = d.width;

function dibujoPorClick()
{
  var lineas = parseInt(texto.value);
  var l = 0;
  var xi, yi, xf, yf;
  var espacio = ancho / lineas;

  dibujarLinea("black", 299, 299, 1, 299);
  dibujarLinea("black", 299, 299, 299, 1);
  dibujarLinea("black", 1, 1, 299, 1);
  dibujarLinea("black", 1, 1, 1, 299);

  for (l = 0; l < lineas; l++)
  {
      yi = espacio * l;
      xf = espacio * (l + 1);
      dibujarLinea("red", 0, yi, xf, 300);
  }
  for (l = 0; l < lineas; l++)
  {
      yf  = espacio * (l + 1);
      xi = espacio * (l + 1);
      dibujarLinea("blue", xi, 0, 300, yf);
  }

  for (l = 0; l < lineas; l++)
  {
      yi = 300 - (espacio * (l + 1));
      xf = espacio * (l + 1);
      dibujarLinea("green", 300, yi, xf, 300);
  }

  for (l = 0; l < lineas; l++)
  {
    yi = espacio * (l + 1);
    xf = 300 - (espacio * (l + 1));
    dibujarLinea("yellow", 0, yi, xf, 0);
  }

  function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal)
  {
      lienzo.beginPath();
      lienzo.strokeStyle = color;
      lienzo.moveTo(xinicial, yinicial);
      lienzo.lineTo(xfinal, yfinal);
      lienzo.stroke();
      lienzo.closePath();
  }

}

![](canvas_150.png

Figura 1:

Captura1.JPG

Figura 2:

Captura2.JPG

HTML:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Dibujando con canvas</title>
	</head>
	<body>
		<h1>Dibujo en canvas</h1>
		<p>
			Cuántas líneas quieres?

			<input type="text" id="texto_lineas"/><br/>

			Cuál figura deseas:
			<div>
	            <input type="radio" id="figura1" 
	                   name="seleccionFigura" value="1" />
	            <label for="figura1">Figura 1</label>
	        </div>

	        <div>
	            <input type="radio" id="figura2" 
	                   name="seleccionFigura" value="2" />
	            <label for="figura2">Figura 2</label>
	        </div>
	        <br/>

			<input type="button" value="A darle!" id="botoncito"/>

		</p>

		<canvas width="300" height="300" id="dibujito"></canvas>
		<p>@manuelpr039</p>

		<script src="dibujo.js"></script>

	</body>
</html>

JS:

var texto = document.getElementById("texto_lineas");
var boton = document.getElementById("botoncito");
var d = document.getElementById("dibujito"); //Método para obtener un elemento del documento por su ID
var lienzo = d.getContext("2d"); //Método del canvas para definir el escenario 2d o 3d
var ancho = d.width;
var ancho2 = (d.width)/2;
var gradiente;

boton.addEventListener("click", dibujoPorClick);

//Para dibujar el marco con gradiente de colores
gradiente = lienzo.createLinearGradient(100,100,270,0);
dibujarLineaMarco(1,1,ancho-1,ancho-1);

//Función para dibujar la Figura 1
function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal){

	lienzo.beginPath();
	lienzo.strokeStyle = color;
	lienzo.lineWidth=1;
	lienzo.moveTo(xinicial, yinicial);
	lienzo.lineTo(xfinal, yfinal);
	lienzo.stroke();
	lienzo.closePath();
}

//Función para dibujar el marco con gradiente de colores
function dibujarLineaMarco(xinicial, yinicial, xfinal, yfinal){

	gradiente.addColorStop("0", "yellow");
	gradiente.addColorStop("0.1", "blue");
	gradiente.addColorStop("1.0", "red");
	lienzo.lineWidth = 5;
	lienzo.strokeStyle = gradiente;
	lienzo.strokeRect(xinicial,yinicial,xfinal,yfinal)
}

function dibujoPorClick(){

	var lineas=parseInt(texto.value);
	var l;
	var n=1;
	var yi, xf, xi, yf;
	var colorcito;
	var espacio = ancho / lineas;
	var espacio2 = ancho2 / lineas;

	d.width = d.width
	dibujarLineaMarco(1,1,ancho-1,ancho-1);

	if(document.getElementById("figura1").checked){

		for(l=0; l<lineas; l++){
			
			yi = espacio*l;
			xf = espacio*(l+1);
			xi = espacio*l;
			yf = espacio*(l+1);

			if(("color"+n)=="color1"){
				colorcito="yellow";
			}else if(("color"+n)=="color2"){
				colorcito="blue";
			}else{
				colorcito="red";
			}

			dibujarLinea(colorcito, 0, yi, xf, 300);
			dibujarLinea(colorcito, xi, 0, 300, yf);	
			dibujarLinea(colorcito, 0, 300-xf, yi, 0);
			dibujarLinea(colorcito, 300, xf, 300-yi, 300);

			if(n==3){
				n=1;
			}else{
				n++;
			}

		}

	}else if(document.getElementById("figura2").checked){

	 	for(l=0; l<lineas;l++){

	 		xi=espacio2*l
	 		yf=150-(espacio2*l);
	 		xi2=300-(espacio2*l);
	 		yf2=150-(espacio2*l);
	 		yf3=150+(espacio2*l);
	 		yf4=150+(espacio2*l);

	 		if(("color"+n)=="color1"){
	 			colorcito="yellow";
	 		}else if(("color"+n)=="color2"){
	 			colorcito="blue";
	 		}else{
	 			colorcito="red";
	 		}

	 		dibujarLinea(colorcito, xi, 150, 150, yf);
	 		dibujarLinea(colorcito, xi2, 150, 150, yf2);
	 		dibujarLinea(colorcito, xi, 150, 150, yf3);
	 		dibujarLinea(colorcito, xi2, 150, 150, yf4);
	 		
			if(n==3){
				n=1;
			}else{
				n++;
			}
	
	 	}

	}else{
	 	alert("Solo tenemos dos figuras por el momento, debes escoger entre la 1 y la 2.");
	}

}

console.log(lienzo);

Así me quedó el canvas despues de torturar mi cerebro por casi un dia jaja 2018-08-23 (1).png

var texto = document.getElementById("texto_lineas");
var boton = document.getElementById("botoncito");
var colores = document.getElementById("star_Color");

boton.addEventListener("click", dibujoPorClick);

var d = document.getElementById("dibujito");
var lienzo = d.getContext("2d");
var ancho = d.width;
var alto = d.height;

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 = colores.value;
  var espacio = (alto / 2) / lineas;
  lienzo.fillStyle = "white";
  lienzo.fillRect(0, 0, ancho, ancho);
  lienzo.clearRect(0, 0, ancho, ancho);
  dibujarLinea(colorcito, 1, 150, ancho - 1, 150);

  for(l = 0; l < lineas; l++)   // Superior izquierdo
  {
    yi = espacio * l;
    xf = 150 - (espacio * l);
    dibujarLinea(colorcito, 150, yi, xf,150);
  }

  for(l = 0; l < lineas; l++)  // Superior derecho
  {
    yi = espacio * l;
    xf = 150 + (espacio * l);
    dibujarLinea(colorcito, 150, yi, xf,150);
  }

  for(l = 0; l < lineas; l++)  // Inferior izquierdo
  {
    yi = 299 - (espacio * l);
    xf = 150 - (espacio * l);
    dibujarLinea(colorcito, 150, yi, xf,150);
  }

  for(l = 0; l < lineas; l++)  // Inferior izquierdo
  {
    xf = 150 + (espacio * l);
    yi = 299 - (espacio * l);
    dibujarLinea(colorcito, 150, yi, xf,150);
  }
}

Yo creé un programa que te dibuja un triangulo de cualquier dimención solo se tiene que indicar las coordenadas de las tres esquina.

El codigo de del HTML

<
<!DOCTYPE html>
<head>
 <meta charset="utf-8"/>
    <title>Proyecto personal de estrella</title>

    <body>
      <h1> Dibujo en un triangulo en la cordenada deseada</h1>
      <canvas id="canvas" width="300" height="300"></canvas>

      <br> Primer punto <br> X: <input type="text" id = "texto_punto1x"/> Y: <input type = "text" id = "texto_punto1y"/>
      <br> Segundo punto <br> X: <input type="text" id = "texto_punto2x"/> Y: <input type = "text" id = "texto_punto2y"/>
      <br> Tercer punto <br> X: <input type="text" id = "texto_punto3x"/> Y: <input type = "text" id = "texto_punto3y"/>


      <br> <input type="button" value= "OK!!!" id = "botoncito"/>
      <p> <br> Favor de colocar las coordenadas del triangulo <br>
      la medida maxima es de <strong> 300 pixeles x 300 pixeles el area editatble</strong>.</p>
      <script src="dibujo_personal.js" charset="utf-8"></script>

    </body>
</head>
>

Codigo del JS


var d = document.getElementById("canvas");
var lienzo = d.getContext("2d");
var prueba;

//************** Elementos de HTML**************
var texto_p1x = document.getElementById ("texto_punto1x");
var texto_p1y = document.getElementById ("texto_punto1y");

var texto_p2x = document.getElementById ("texto_punto2x");
var texto_p2y = document.getElementById ("texto_punto2y");

var texto_p3x = document.getElementById ("texto_punto3x");
var texto_p3y = document.getElementById ("texto_punto3y");

var boton = document.getElementById("botoncito");
boton.addEventListener("click", dibujoPorClick);
//*********************************************

var punto1x, punto1y, punto2x, punto2y, punto3x, punto3y;




function dibujoPorClick()
      {
        punto1x = parseInt(texto_p1x.value);
        punto1y = parseInt(texto_p1y.value);
        punto2x = parseInt(texto_p2x.value);
        punto2y = parseInt(texto_p2y.value);
        punto3x = parseInt(texto_p3x.value);
        punto3y = parseInt(texto_p3y.value);

        condicionTriangulo(punto1x,punto1y,punto2x,punto2y,punto3x,punto3y);

      }


function condicionTriangulo (punto1x,punto1y,punto2x,punto2y,punto3x,punto3y)
    {

    if ( punto1x <= punto2x && punto1x != punto2x)
        {
          console.log ("se ejecuto el IF"+": condicion 1 " + (punto1x <= punto2x) + "condicion 2"+ (punto1x != punto2x) );
          ecuacion_recta(punto1x,punto1y,punto2x,punto2y,punto3x,punto3y);

        }

    else if (punto2x < punto1x)
        {
          console.log("se ejecuto el ELSE-IF");
          ecuacion_recta(punto2x,punto2y,punto1x,punto1y,punto3x,punto3y);

        }
    else if   (punto1x < punto3x)
        {
          console.log("se ejecuto el ELSE");
          ecuacion_recta(punto1x,punto1y,punto3x,punto3y,punto2x,punto2y);

        }
    else
        {
          console.log("se ejecuto el ELSE");
          ecuacion_recta(punto3x,punto3y,punto1x,punto1y,punto2x,punto2y);

        }
      }




function  pendiente (x1,y1,x2,y2) // se obtiene el valor de la pendiente que es utilizado en funcion: ecuacion_recta
    {
      var primera_resta;
      var segunda_resta;
      var resultado;

      primera_resta = x2-x1;
      segunda_resta = y2-y1;
      resultado = segunda_resta/primera_resta;
      return resultado;
    }


function ecuacion_recta(x1,y1,x2,y2,x3,y3) // ecuación de la recta para determinar los puntos a trazar
    {
      var m;
      var ecu_x;
      m = pendiente(x1,y1,x2,y2); //llamdo de la funcion pendiente
      console.log("Dato: la pendiente de la recta es:" + m);
        for (x=x1;x <= x2 ;x++)
        {

          ecu_x = (x*m)+(m*-(x1))+y1;
          dibujarLinea ("#AAF",x,ecu_x,x3,y3);
        }

    }

function dibujarLinea(color, x_inicial, y_inicial, x_final, y_final)
    {
      lienzo.beginPath(); /* incializa la función para el trazado   */
      lienzo.strokeStyle = color; /* declaramos el color de la linea*/
      lienzo.moveTo(x_inicial, y_inicial); /* movemos el focus al punto inicial*/
      lienzo.lineTo(x_final, y_final);/* trazamos una linea del punto declado al punto insertado en la función*/
      lienzo.stroke(); /* cerramos el stilo*/
      lienzo.closePath(); /* cerramos la función*/
      return 0;
    }

siendo sincero, soy programador, pero no me dedico de lleno a programar ya que también me gusta el diseño gráfico…y bueno, no tengo la destreza que desearía para realizar proyectos serios. Por eso estoy empezando nuevamente con lo básico, con cosas que ya he visto, pero tengo que decir que esto es un diferencial enorme que tiene platzi…hice mil cursos, pero nadie nadie se toma el tiempo que se toma freddy de explicar los por que de cada linea y sentencia…la lógica de los algoritmos (que es algo que en realidad debería enseñarse antes que cualquier lenguaje, aprender a pensar un problema deslozandolo por partes, es el cáliz de un programador) y así poder entender todo de manera correcta. Aplausos para Freddy!

El elemento HTML form (<form>) representa una sección de un documento que contiene controles interactivos que permiten a un usuario enviar información a un servidor web.

El elemento <input>, teniendo el valor “reset” en su atributo type, representa un botón que, cuando es presionado, restaura todos los campos del formulario (<form>) al cual pertenece, a sus valores iniciales.

El método .clearRect convierte todos los pixeles en el espacio definido por el punto de inicio (x, y) y tamaño (width, height) a negro transparente, borrando cualquier contenido dibujado anteriormente.

50.png
51.png
52.png
Captura de pantalla (33).png
capture-desafio-II.jpg
capture-desafio-I.jpg

Aqui tienen mi ejemplo para que comparen.
ejemplo de cavas.png

Y el codigo
codigo 1.png
codigo 2.png

No puedo creer lo rápido que se avanza con este curso

En este proyecto, el usuario podrá:

  1. Ajustar a su gusto el “ancho” y el “alto” del canvas y el código funcionará de manera simétrica acomodándose a dichos ajustes.
  2. Elegir cuántas líneas desea en cada extremo del área de dibujo en el momento de dibujar la “malla”.
  3. Decidir si aparte de la malla también desea dibujar 5 estrellas.
  4. Además, decidir si también desea dibujar cuadros en el centro de cada estrella.
1 Imag Desafiío 6.png
2 Código Desafío 6.png
canvas1.png
canvas.png

Este es miresultado final. Para formar la estrella tuve algunas complicaciones pero fue cuestion de paciencia “prueba error” tener en cuenta que error habia cometido y no volver a cometerlo. Me gusto mucho esta clase.
Hola.PNG

Mi resultado, le agregue un botón para limpiar la pantalla, lo que en realidad hace es refrescar la pagina.

eventoshtml.png
retoPart1.PNG
retoPart2.PNG
reto.PNG

No sé por qué presiento que la mayoría de ustedes no son Noobs en esto 😛

Encontré una forma para que al darle click el dibujo se reinicie, sin necesidad de recargar la página. Con este comando:

lienzo.clearRect(0, 0, ancho, alto);

El dibujo se reseteara cada vez que apretemos el botón, logrando una apariencia más agradable a la que tenemos (en la que cada vez que apretamos el botón los dibujos se superponen).

Para hacerlo más profesional como dice Freddy, en vez de poner 300x300, utilizamos la variable “ancho” que creamos y creamos una nueva que “alto”, que se declara de la siguiente forma:

var alto = d.height;

Espero les sirva. Saludos!

Hola, por favor den un like.

Porque soy un niño de 13 años.

En la caja de texto pongo que me dibuje 10 líneas por ejemplo y me las hace.

Luego si le pongo que me haga 5, no me borra  las líneas

anteriores. Como se puede hacer para que me deje limpio el

lienzo antes de volver a dibujar otras líneas ? 

el curso esta re bueno y debo admitir que en ocasiones tengo que repetir los videos para entenderlos bien 😄 saludos freddy eres muy bueno para enseñar!!!

id= "Es la forma en la que JavaScript decide como acceder a la variable. Es el nombre en JavaScript de la etiqueta en HTML"

Aquí les comparto!
![](Captura de pantalla (58).png

Hola Lenny,… el principal requisito para entrar en este mundo es que tengas ganas de aprender y el segundo es que nunca pierdas el interés por avanzar sin importar la velocidad que tengas. En este mundo no existen barreras, solo las que nos impongamos a nosotros mismos. Si estudias y practicas sin parar, verás cómo se expande tu mundo y tu mente a millón 😉

Para mi esto es nuevo, nunca había estudiado programación, y me gusta, así que no me rendiré. Quiero poder aprender y mejorar mis ingresos. Ademas de superarme a mi misma cada día.

Screenshot_5.png