No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Eventos y Formularios en HTML y JavaScript

15/37
Recursos

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)

Aportes 2678

Preguntas 570

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Reg铆strate o inicia sesi贸n para participar.

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, 鈥淓STOY 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.

馃惐鈥嶐煉 Experimentando con los conocimientos adquiridos.

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

me quedo asi :

Tengo 73 a帽os, soy licenciado en Finanzas de Empresas, jubilado. Siempre tuve una habilidad innata para crear sistemas. En los 70鈥檚 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.

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++.

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);
}```

Despu茅s de much铆simas horas de trabajo.

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

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!

Mi aporte

++ 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

鈥淏otoncito 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(鈥榚vent鈥, 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 鈥渜uiera鈥 , 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.

![](

Lo logr茅!!

<!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="";
}
}

Mi aporte:

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.








隆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(鈥渂otoncito鈥);
var texto= document.getElementById(鈥渢exto_lineas鈥);
boton.addEventListener(鈥渃lick鈥, dibujoPorCLick);

var d = document.getElementById(鈥渄ibujito鈥);
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);
}

Hola!! Logr茅 que el usuario elija la cantidad de lineas, los colores y tenga la opci贸n de borrar el dibujo. Saludos


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

聽聽}


}

Por f铆n, despu茅s de mucho atormentar a mis neuronas.

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

![](

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);
  }
}```

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 鈥減rogramming 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.

![](

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.

Yo le agregue color y figura

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

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??

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

Este es mi dibujo (la verdad cambie un poquito el c贸digo):

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(鈥渓acajalineas鈥);
var boton = document.getElementById(鈥渆lbotonlineas鈥);
var d = document.getElementById(鈥渆ldibujo鈥);
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(鈥渟pringgreen鈥, l, ancho, ancho, ancho - delta - l);
dibujaLinea(鈥測ellow鈥, ancho, ancho + delta + l, 2ancho - l, ancho);
dibujaLinea(鈥渙rangered鈥,l, ancho, ancho, ancho + delta + l);
dibujaLinea(鈥渄eepskyblue鈥, 2
ancho - l, ancho, ancho, ancho - delta - l);
console.log("Esta es la l铆na n煤mero " + l);
}
dibujaLinea(鈥渟pringgreen鈥, ancho, 0, ancho, ancho);
dibujaLinea(鈥測ellow鈥, ancho, ancho, ancho, 2ancho);
dibujaLinea(鈥渙rangered鈥, 0,ancho, ancho, ancho);
dibujaLinea(鈥渄eepskyblue鈥, ancho, ancho, 2
ancho,ancho);
//dibujaLinea(鈥渁zure鈥,ancho, 0, ancho, 2 * ancho );
//dibujaLinea(鈥渁zure鈥,0,ancho, 2 * ancho , ancho);
//alert(鈥淪uave con ese mouse鈥); console.log(texto.value);
}

boton.addEventListener(鈥渃lick鈥, clicBoton);

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

<head>
<meta charset=鈥渦tf-8鈥>
<title>Primer dibujo con canvas</title>
<style type=鈥渢ext/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 = 鈥渢ext鈥 id = 鈥渓acajalineas鈥 value = 鈥30鈥>
<input type = 鈥渂utton鈥 id = 鈥渆lbotonlineas鈥 value = 鈥淗谩gale鈥>
</p>
<canvas id=鈥渆ldibujo鈥 width=鈥760鈥 height=鈥760鈥></canvas>
<p>Fin del canvas</p>
<!鈥搒cript src=鈥渄ibujo.js鈥 charset=鈥渦tf-8鈥></script鈥>
<!鈥搒cript src=鈥渄ibujoConFunciones.js鈥 charset=鈥渦tf-8鈥></script鈥>
<!鈥搒cript src=鈥渄ibujaMallas.js鈥 charset=鈥渦tf-8鈥></script鈥>
<script src=鈥渄ibujaMallasEventuales.js鈥 charset=鈥渦tf-8鈥></script>
</body>

</html>

Mi aporte!

Mira, Freddy lo hice antes que tu en el video, y tengo 11 a帽os隆 ![](

C贸digo para crear dos figuras donde el usuario puede elegir el numero de lineas de cada figura
![](

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)
      }
}

<meta charset=鈥渦tf-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

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.

var texto1 = document.getElementById(鈥渢exto_figura鈥);
var texto = document.getElementById(鈥渢exto_lineas鈥);
var botton = document.getElementById(鈥渂otoncito鈥);
botton.addEventListener(鈥渃lick鈥, dibujoPorClick);// addEventListener (escuhador de elementos) es para a帽adir al boton una funcion para ver cuando ocurre un evento

var d = document.getElementById(鈥渄ibujito鈥); //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 鈥渧alue鈥 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(鈥渓inea鈥 + 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 鈥渧alue鈥 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(鈥渓inea鈥 + 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 鈥渧alue鈥 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(鈥渓inea鈥 + 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

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!



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;	
}


DEspues de muchas tazas de cafe, de repetir la clase no se cuantas veces y tragarse la frustraci贸n. Lo logr茅!!!

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(鈥榖otonsito2鈥)
boton2.addEventListener(鈥渃lick鈥, borrado)

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


<!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 aadirLineas(){
      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>

![](

Luego de varias horas logr茅 lo siguiente:

La primera vez que vi el video pens茅 que hab铆a entendido porque hice todo lo que indic贸 y lo hice perfecto. Luego intent茅 hacer algo sencillo y no puede empec茅 a investigar a leer y ver videos en youtube luego regres茅 y lo vi por segunda vez y entend铆 cosas que no hab铆a visto la primera vez. Las clases son buenas pero hay que ponerle coraz贸n 脿ra aprender. Saludos.

Casi que NO!!! pero Motivado

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

}>

Este es mi resultado despues de horas de trabajo

<!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);
    } 


}

// definir las caracteristicas del canvas
var d = document.getElementById(鈥渄ibujito鈥);
var lienzo = d.getContext(鈥2d鈥);
lienzo.fillStyle = 鈥渂lack鈥;
lienzo.fillRect(0, 0, d.width, d.height);
//definir las caracteristicas del input
var texto = document.getElementById(鈥渢exto_lineas鈥);
var dibujos = document.getElementById(鈥渢exto_dibujos鈥);
var boton = document.getElementById(鈥渂otoncito鈥);
boton.addEventListener(鈥渃lick鈥, 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(鈥淲hite鈥, 150, 0, 150, 300);
dibujarLinea(鈥淲hite鈥, 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(鈥淏lue鈥, yIn, 150, 150, a);
dibujarLinea(colorcito, 150, yIn, b, 150);
dibujarLinea(鈥渨hite鈥, yIn, 150, 150, b);
dibujarLinea(鈥淕reen鈥, 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(鈥淕reen鈥, 0, a, xFn, 0);
dibujarLinea(鈥渨hite鈥, yIn, 0, 300, xFn);
dibujarLinea(鈥淏lue鈥, 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(鈥淏lue鈥, yIn, 150, 150, a);
dibujarLinea(colorcito, 150, yIn, b, 150);
dibujarLinea(鈥渨hite鈥, yIn, 150, 150, b);
dibujarLinea(鈥淕reen鈥, 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(鈥淕reen鈥, 0, d, xFn, 0);
dibujarLinea(鈥渨hite鈥, yIn, 0, 300, xFn);
dibujarLinea(鈥淏lue鈥, yIn, 300, 300, d);
dibujarLinea(colorcito,0, yIn, xFn, 300);
}
}
}

Dibujando en canvas.

Poco a poco 鈾

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

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鈥

Le aumente checkboxes
![](
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
}

As铆 quedo mi formulario intentare hacer uno pidiendo un numero de lineas para crear una figura

<code>
```<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Dibujo con eventos</title>
  </head>
  <body>
    <h1>Crea tu dibujo</h1>
    <p>
      elige un color
      <select name="color" value="colorcitos" id="colores">
      <option value="red">rojo</option>
      <option value="green">verde</option>
      <option value="yellow">amarillo</option>
      <option value="blue">azul</option>
      <option value="black">negro</option>
      <option value="gray">gris</option>
      <option value="orange">anaranjado</option>
      </select>
    </p>
    <p>que dibujo quieres</p>
    <p><input type="radio" name="dibujos" value="zorro" id="radiozorro" /> Zorro </p>
    <p><input type="radio" name="dibujos" value="perro" id="radioperro" /> Perro</p>


<canvas width="500" height="500" id="dibujo"> </canvas>
<script src="peventos.js"></script>
  </body>
</html>


<code>

var boton2=document.getElementById("radioperro");
var boton3=document.getElementById("colores");
boton1.addEventListener("click", lineaszorro);
boton2.addEventListener("click", lineasperro);
var d=document.getElementById("dibujo");
var ancho=d.width/2;
var lienzo=d.getContext("2d");
var colorear=boton3.value;

function dibujar(colorear, x_inicial, y_inicial, x_final, y_final)
{
  var colorear=boton3.value;
  lienzo.beginPath();
  lienzo.strokeStyle=colorear;
  lienzo.moveTo(x_inicial, y_inicial);
  lienzo.lineTo(x_final, y_final);
  lienzo.stroke();
  lienzo.closePath();
}
function dibujarperro(colorear, x_inicial, y_inicial, x_final, y_final)
{
  var colorear=boton3.value;
  lienzo.beginPath();
  lienzo.strokeStyle=colorear;
  lienzo.moveTo(x_inicial, y_inicial);
  lienzo.lineTo(x_final, y_final);
  lienzo.stroke();
  lienzo.closePath();
}
function dibujarcuadrosperro(colorear, x_inicial, y_inicial, x_final, y_final)
{
  var colorear=boton3.value;
  lienzo.beginPath();
  lienzo.strokeStyle=colorear;
  lienzo.rect(x_inicial,y_inicial,x_final,y_final);
  lienzo.stroke();
  lienzo.closePath();
}
function rellenar(colorear, colorear, x1, y1, x2, y2, x3, y3, x4, y4, x5, y5)
{
  var colorear=boton3.value;
  lienzo.beginPath();
  lienzo.strokeStyle = colorear;
  lienzo.fillStyle = colorear;
  lienzo.moveTo(x1, y1);
  lienzo.lineTo(x2, y2);
  lienzo.lineTo(x3, y3);
  lienzo.lineTo(x4, y4);
  lienzo.lineTo(x5, y5);
  lienzo.stroke();
  lienzo.fill();
  lienzo.closePath();

}
function ojos(colorear, x, y, r, inicio, final, direccion)
{
  var colorear=boton3.value;
  lienzo.beginPath();
  lienzo.strokeStyle=colorear;
  lienzo.arc(x,y,r,inicio,final,direccion);
  lienzo.stroke();
  lienzo.closePath();
}

function lineaszorro()
{
  dibujar(colorear,150, 20, 110, 30);
  dibujar(colorear, 130, 35, 110, 30);
  dibujar(colorear, 150, 20, 130, 35);
  dibujar(colorear, 150, 20, 170, 35);
  dibujar(colorear, 130, 35, 170, 35);
  dibujar(colorear, 150, 20, 190, 30);
  dibujar(colorear, 190, 30, 170, 35);
  dibujar(colorear, 110, 30, 110, 50);
  dibujar(colorear, 110, 50, 130, 35);
  dibujar(colorear, 110, 50, 125, 60);
  dibujar(colorear, 125, 60, 130, 35);
  dibujar(colorear, 125, 60, 150, 80);
  dibujar(colorear, 130, 35, 148, 70);
  dibujar(colorear, 170, 35, 152, 70);
  dibujar(colorear, 170, 35, 180, 60);
  dibujar(colorear, 180, 60, 150, 80);
  dibujar(colorear, 170, 35, 190, 50);
  dibujar(colorear, 190, 50, 180, 60);
  dibujar(colorear, 190, 30, 190, 50);
  dibujar(colorear, 120, 17, 130, 25);
  dibujar(colorear, 170, 25, 180, 17);
  dibujar(colorear, 125, 60, 130, 170);
  dibujar(colorear, 125, 60, 150, 155);
  dibujar(colorear, 130, 170, 135, 100);
  dibujar(colorear, 150, 155, 150, 80);
  dibujar(colorear, 150, 80, 135, 100);
  dibujar(colorear, 150, 155, 175, 63);
  dibujar(colorear, 175, 63, 165, 170);
  dibujar(colorear, 150, 80, 165, 100);
  dibujar(colorear, 165, 100,165, 170);
  dibujar(colorear, 175, 63, 200, 100);
  dibujar(colorear, 200, 100, 200, 150);
  dibujar(colorear, 200, 150, 165, 170);
  dibujar(colorear, 200, 100, 165, 170);
  dibujar(colorear, 200, 150, 190, 170);
  dibujar(colorear, 190, 170, 165, 170);
  dibujar(colorear, 200, 150, 230, 170);
  dibujar(colorear, 190, 170, 230, 170);
  dibujar(colorear, 200, 150, 245, 167);
  dibujar(colorear, 245, 167, 230, 170);
  //nariz
  rellenar(colorear,colorear,  145, 75, 148, 70, 152, 70, 155, 75, 150, 80);
  //oreja izquierda
  rellenar(colorear,colorear, 120, 17, 110, 30, 110, 10);
  //oreja derecha
  rellenar(colorear,colorear, 190, 30, 190, 10, 180, 17);
  //patas
  rellenar(colorear,colorear, 130, 170, 150, 155, 165, 170);
  //cola
  rellenar(colorear,colorear, 245, 167, 230, 152, 232, 162);

  //ojos
  ojos(colorear, 133,55,5, Math.PI*2,Math.PI*1,false);
  ojos(colorear,168,55,5,Math.PI*2,Math.PI*1,false);
}

function lineasperro()
{
  //cabeza
  dibujarcuadrosperro(colorear,75,50,50,50); //rect es la funcion para hacer rectangulos
  //nariz
  dibujarcuadrosperro(colorear,60,100,40,35);
  dibujarcuadrosperro(colorear,100,100,40,35);
  //cuerpo
  //base triangulo
  dibujarperro(colorear,60,300,150,300);
  //lado izquierdo
  dibujarperro(colorear,100,135,60,300);
  //lado derecho
  dibujarperro(colorear,100,135,150,300);
  //orejas
  //izquierda
  dibujarperro(colorear,75,50,30,115);
  dibujarperro(colorear,75,50,65,40);
  dibujarperro(colorear,65,40,30,115);
  //derecha
  dibujarperro(colorear,125,50,175,115);
  dibujarperro(colorear,125,50,135,40);
  dibujarperro(colorear,175,115,135,40);
  //patas traseras
  //izquierda
  dibujarperro(colorear,88,185,25,260);
  dibujarperro(colorear,25,260,60,300);
  //triangulo peque帽o pata traseras
  //base de triangulo
  dibujarperro(colorear,25,310,50,310);
  //lado derecho
  dibujarperro(colorear,40,279,25,310);
  //lado izquierdo
  dibujarperro(colorear,40,279,50,310);
  // pata derecha
  dibujarperro(colorear,115,185,185,260);
  dibujarperro(colorear,185,260,150,300);
  //triangulo peque帽o pata derecha
  //base del triangulo
  dibujarperro(colorear,185,310,160,310);
  //lado derecho
  dibujarperro(colorear,170,279,160,310);
  //lado izquierdo
  dibujarperro(colorear,170,279,185,310);
  //patas delanteras
  //izquierda
  dibujarcuadrosperro(colorear,60,300,35,10);
  //derecha
  dibujarcuadrosperro(colorear,115,300,35,10);

  dibujarcuadrosperro(colorear,85,85,5,5);
  dibujarcuadrosperro(colorear,110,85,5,5);
}


Determinando el punto de inicio de las curvas, resulta este dibujo 馃槂



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

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

En este proyecto, el usuario podr谩:

  1. Ajustar a su gusto el 鈥渁ncho鈥 y el 鈥渁lto鈥 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 鈥渕alla鈥.
  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.

Aqui tienen mi ejemplo para que comparen.

Y el codigo

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 鈥渞eset鈥 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.

siendo sincero, soy programador, pero no me dedico de lleno a programar ya que tambi茅n me gusta el dise帽o gr谩fico鈥 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鈥ice mil cursos, pero nadie nadie se toma el tiempo que se toma freddy de explicar los por que de cada linea y sentencia鈥a 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!

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) // ecuacin 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;
    }

As铆 me qued贸 el canvas despues de torturar mi cerebro por casi un dia jaja

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

Figura 1:

Figura 2:

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

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

}

![](

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

TU LO CREAS , TU LO INVENTAS

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.

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

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=鈥渦tf-8鈥>
<title>DIBUJANDO CON CANVAS</title>
</head>
<body>
<h1>Flor en CANVAS</h1>
<p>
Ancho del dibujo :
<input type=鈥渢ext鈥 id=鈥渢exto-ancho鈥/>
Alto del dibujo :
<input type =鈥渢ext鈥 id=鈥渢exto-alto鈥/>
Cantidad de l铆neas :
<input type=鈥渢ext鈥 id=鈥渢exto-lineas鈥/>
Color :
<input type=鈥渢ext鈥 id=鈥渢exto-color鈥/>
<input type=鈥渂utton鈥 value=鈥淎 darle鈥 id=鈥渂otoncito鈥/>
</p>
<canvas id=鈥渄ibujito鈥 width=600 height=600></canvas>
<p>asi queda la flor.</p>
<script src=鈥渄ibujo.js鈥>
</script>
</body>
</html>

El codigo javascript:

var texto=document.getElementById(鈥渢exto-lineas鈥);
var ancho=document.getElementById(鈥渢exto-ancho鈥);
var alto=document.getElementById(鈥渢exto-alto鈥);
var color=document.getElementById(鈥渢exto-color鈥);

var boton=document.getElementById(鈥渂otoncito鈥);
boton.addEventListener(鈥渃lick鈥,dibujoPorClick);

var d=document.getElementById(鈥渄ibujito鈥);
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:
++

![](

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. 鈥渄鈥 es el nombre de mi variable a la que cargu茅 el objeto canvas 鈥渄ibujito鈥.

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, 馃槂

![](

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.

**Comparto mis resultados!! espero puedan hacer comentarios de enrrequecimiento compa帽eros.
**

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

}

HTML

<!DOCSTYLE html>
<html>
<head>

	<meta charset = "utf-8"/>
	<title>Dibujando con Canvas</title>

</head>

<style type = "text/css">
	body 
	{
	background-color: #8eaabe; 
	}
	</style>
	
<body>

<h1>Distintos tipos de ojos</h1>
<p>

Que tipo de ojo quieres? </br> </br> 
<input type="button" id="select_orco" value = "Orco"/> </br> </br>
<input type="button" id = "select_humano" value = "Humano"/> </br> </br> 
<input type="button" id="select_gato" value = "Gato"/> </br> </br>
<input type="button" id="select_space" value = "Odisea Espacial 2001"/> </br> </br>

</p>
<canvas width = "500" height = "500" id="eyeballs"> </canvas>

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

</body>
</html>
var boton_orco = document.getElementById("select_orco");
boton_orco.addEventListener("click",ojoSeleccionadoOrco);
var radio_humano = document.getElementById("select_humano");
radio_humano.addEventListener("click",ojoSeleccionadoHumano);
var radio_gato = document.getElementById("select_gato");
radio_gato.addEventListener("click",ojoSeleccionadoGato);
var radio_space = document.getElementById("select_space");
radio_space.addEventListener("click",ojoSeleccionadoSpace);

var d = document.getElementById("eyeballs");
var ancho = d.width;
var alto = d.height;
var ctx = d.getContext("2d");
console.log(ctx);

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

	dibujarLinea("black",1,1,1,alto-1); 
	dibujarLinea("black",1,alto-1,ancho-1,alto-1);
	dibujarLinea("black",ancho-1,alto-1,alto-1,1);
	dibujarLinea("black",ancho-1,1,1,1);
		
function dibujarCirculo(centroX, centroY, radio, colorRelleno)

{
	ctx.beginPath(); 
	ctx.arc(centroX, centroY, radio, 0, 2 * Math.PI); 
	ctx.fillStyle = colorRelleno; 
	ctx.fill();
	ctx.lineWidth = 1;
	ctx.strokeStyle = colorRelleno;
	ctx.stroke();
}

function dibujarElipse(centroX, centroY, radioX, radioY, rotacion, anguloInicial, anguloFinal, colorRelleno)
{
	ctx.beginPath();
	ctx.ellipse(centroX, centroY, radioX, radioY, rotacion, 0, 2 * Math.PI);
	ctx.fillStyle = colorRelleno; 
	ctx.fill();
	ctx.lineWidth = 1;
	ctx.strokeStyle = colorRelleno;
	ctx.stroke();
}

function ojoSeleccionadoOrco()
{
	ctx.fillStyle = "#228B22"; 
	ctx.fillRect(0,0,d.width,d.height); 
	dibujarElipse (250, 250, 130, 245, Math.PI/2, 0, 2 * Math.PI,"yellow");
	dibujarCirculo(250, 250, 50, "red");
	dibujarCirculo(250, 250, 15, "black");
	dibujarCirculo(275, 225, 12.5, "white");
}

function ojoSeleccionadoHumano()
{
	ctx.fillStyle = "#FAA"; 
	ctx.fillRect(0,0,d.width,d.height); 
	dibujarElipse (250, 250, 210, 230, Math.PI/2, 0, 2 * Math.PI,"white");
	dibujarCirculo(250, 250, 70, "blue");
	dibujarCirculo(250, 250, 50, "black");
	dibujarCirculo(290, 215, 12.5, "white");
}

function ojoSeleccionadoGato()
{
	ctx.fillStyle = "gray"; 
	ctx.fillRect(0,0,d.width,d.height); 
	dibujarElipse (250, 250, 130, 245, Math.PI/2, 0, 2 * Math.PI,"#7AA9DD");
	dibujarElipse (250, 250, 10, 125, Math.PI, 0, 2 * Math.PI,"black");
}

function ojoSeleccionadoSpace()
{
	ctx.fillStyle = "#29ff22"; 
	ctx.fillRect(0,0,d.width,d.height); 
	dibujarElipse (250, 250, 210, 230, Math.PI/2, 0, 2 * Math.PI,"#fd2cee");
	dibujarCirculo(250, 250, 70, "#29ff22");
	dibujarCirculo(250, 250, 20, "#fd2cee");
	dibujarCirculo(290, 215, 12.5, "white");
}

Aqu铆 les comparto!
![](

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!!!

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 鈥渁ncho鈥 que creamos y creamos una nueva que 鈥渁lto鈥, que se declara de la siguiente forma:

var alto = d.height;

Espero les sirva. Saludos!

No s茅 por qu茅 presiento que la mayor铆a de ustedes no son Noobs en esto 馃槢

Hola, por favor den un like.

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


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

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

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