Empieza por ac谩

1

Mi primera l铆nea de c贸digo

Fundamentos de Programaci贸n

2

驴Qu茅 es HTML/CSS/JS?

3

JavaScript no es Java

4

Primeros pasos en el navegador con alert

5

HTML, CSS, JavaScript de verdad

6

Los apuntes de Freddy en PDF

Primer proyecto: Peso en otro planeta

7

Peso en otro planeta

8

Obteniendo datos del usuario

9

Flujo y condicionales

Segundo proyecto: Dibujando con Canvas

10

C贸mo funcionan Window y Document

11

El DOM: nuestro lugar de trabajo en la web

12

Dibujando en el DOM

13

Qu茅 son las Funciones en JavaScript

14

Ciclos while y for en JavaScript

15

Eventos y Formularios en HTML y JavaScript

16

Detectar eventos del teclado con JavaScript

17

Dibujar en canvas con las flechas del teclado

Tercer proyecto: Villa platzi

18

Funciones matem谩ticas y n煤meros aleatorios en JavaScript

19

Uso y carga de im谩genes en Canvas

Cuarto proyecto: Pakimanes

20

Divisi贸n, m贸dulo y residuo en JavaScript

21

Clases y Arrays en JavaScript

Quinto proyecto: Cajero autom谩tico

22

Diagrama de Flujo del Cajero Autom谩tico

23

Implementaci贸n del Cajero Autom谩tico

Sexto proyecto: Cliente/Servidor

24

Modelo Cliente/Servidor

25

Primer servidor web con express

Programaci贸n de Hardware y Electr贸nica con Arduino

26

驴C贸mo funciona un circuito electr贸nico?

27

驴C贸mo programar un Arduino?

28

Programaci贸n de circuitos con C, Arduino y Sketch

29

C贸mo programar un Arduino con Javascript y Node

30

Construye un Robot con JavaScript

31

Robot para riego de plantas en Arduino, Javascript y Node

Materiales de apoyo

32

Las mejores notas de los estudiantes

33

驴Cu谩l lenguaje de programaci贸n aprender primero?

34

La Web con Visi贸n Profesional

Contenido Bonus

35

Qu茅 son tablas de verdad y compuertas l贸gicas

Recap Curso Gratis de Programaci贸n B谩sica

36

Recap Programaci贸n b谩sica

37

Recap Programaci贸n b谩sica ENG

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. Pueden ser sucesos como un clic, pulsar una tecla, colocar el mouse sobre un bot贸n, entre otros.

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

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

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

Recuerda:

  • Cuando queremos enviar informaci贸n a un servidor podemos usar un formulario con la etiqueta <form>.

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

Aportes 2345

Preguntas 738

Ordenar por:

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

馃惐鈥嶐煉 Experimentando con los conocimientos adquiridos.

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.

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

![](

Mi aporte

Lo logr茅!!

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.








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

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

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


Bueno, lo mantuve relativamente sencillo porque ya me gustaba como me qued贸 todo a un principio. Por lo menos ya s茅 como cambiar las formas.

Mi aporte:

Yo le agregue color y figura

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

![](

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.


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

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.

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

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.

![](

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.

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

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

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!



Mi aporte!

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

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

Este es mi resultado despues de horas de trabajo

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

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

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
}

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鈥

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

Bueno, despu茅s de varios intentos as铆 me quedo, Me estoy enamorando de todo esto

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


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

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

![](

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

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

![](

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


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



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!

S茅 que esto no se parece nada de lo que pidi贸, pero se me ocurri贸 que ser铆a una buena idea hacerla (lo hice con prompt porque no me sal铆a las Condicionales en input鈥檚),

Aqu铆 puedes ver la Constelaci贸n de las estrellas seg煤n tu signo, espero que les guste:

<html>

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8"/>
    <title>Dibujando con Canvas</title>
  </head>
  <body>
    <h1>Viendo las Estrellas</h1>
    <p>Deja que las Estrellas te asombren!</p>
    <canvas width="1000" height="500" id="dibujito"></canvas>
    <p></p>
    <script src="dibujo.js"></script>
  </body>
</html>
<js>

var d = document.getElementById("dibujito");//draw id
var lienzo = d.getContext("2d");//draw Context
lienzo.fillStyle= "black";
lienzo.fillRect(0, 0, d.width, d.height);

function stars(color, xi, yi, xf, yf){
lienzo.beginPath();
lienzo.strokeStyle= color;
lienzo.moveTo(xi, yi);
lienzo.lineTo(xf, yf);
lienzo.stroke();
lienzo.closePath();
}
function star_lines(color, xi, yi, xf, yf){
  lienzo.beginPath();
  lienzo.strokeStyle= color;
  lienzo.moveTo(xi, yi);
  lienzo.lineTo(xf, yf);
  lienzo.stroke();
  lienzo.closePath();
}
//para cancer
stars("white", 350, 390, 351, 391);//abajo izquierda
stars("white", 600, 400, 601, 401);//abajo derecha
stars("white", 450, 250, 451, 251);//arriba centro | Taurus
stars("white", 400, 170, 401, 171);//arriba diagonal
stars("white", 350, 90, 351, 91);//arriba M脕S diagonal

//para escorpio
stars("white", 353, 300, 354, 301);//1
stars("white", 328, 320, 329, 321);//2
stars("white", 309, 335, 310, 336);//3 puntitos diagonales
stars("white", 450, 400, 451, 401);//centro abajo
stars("white", 550, 390, 551, 391);//derecha abajo
stars("white", 565, 300, 566, 301);//arriba_1 diagonal
stars("white", 579, 230, 580, 231);//arriba_2 diagonal | Aries other star copy | AQUARIUS NEEDS THIS !!!!!!!!!!!!!!!!!!!!
stars("white", 584, 150, 585, 151);//arriba_3 diagonal
stars("white", 600, 130, 601, 131);//arriba un poquito diagonal
stars("white", 750, 60, 751, 61);//punto 1 largo
stars("white", 760, 100, 761, 101);//punto 2 largo
stars("white", 755, 140, 756, 141);//punto 3 largo

//para Aries
stars("white", 560, 130, 561, 131);//third star
stars("white", 600, 280, 601, 281); //Aries other star copy
stars("white", 606, 310, 607, 311);//Aries little line
stars("white", 590, 326, 591, 327);//Aries super little line

//para Tauro
stars("white", 200, 50, 201, 51); //first point
stars("white", 160, 150, 161, 151); //second point
stars("white", 290, 116, 291, 117); //nulka
stars("white", 380, 185, 381, 186); //center
stars("white", 500, 150, 501, 151); //arm | LEO FINAL POINT | SECOND TO AQUARIUS!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

//for Geminis (1 is down) (2 is up)
stars("white", 20, 400, 21, 401);//left arm (1)
stars("white", 50, 350, 51, 351);// center (1)
stars("white", 20, 330, 21, 331);//head (1)
stars("white", 150, 410, 151, 411);//between legs (1)
stars("white", 220, 450, 221, 451);//left leg (1)
stars("white", 300, 460, 301, 461);//+ extra left leg (1)
stars("white", 220, 375, 221, 376);//right leg (1)
stars("white", 300, 370, 301, 371);//+ extra right leg (1)

stars("white", 100, 320, 101, 321);//right arm (1 and left arm of 2)
stars("white", 140, 280, 141, 281);//center (2)
stars("white", 160, 220, 161, 221);//right arm (2)
stars("white", 115, 255, 116, 256);//head (2)
stars("white", 230, 280, 231, 281);//between legs (2)
stars("white", 270, 300, 271, 301);//left leg (2) | will conect with 1 puntito diagonal escorpio
stars("white", 270, 260, 271, 261);//right leg (2)
stars("white", 353, 265, 354, 266);//+ extra right leg (2)

//For leo
stars("white", 240, 450, 241, 451);//"left leg replica (1)"
stars("white", 530, 260, 531, 261);// 1 puntito diagonal replica
stars("white", 420, 200, 421, 201);//little bit up from center of Cancer | LIBRA NEEDS THIS
stars("white", 440, 100, 441, 101);//copy of TAURUS arm

//For Virgo
stars("white", 420, 350, 421, 351);//down center
stars("white", 470, 260, 471, 261);//front of middle
stars("white", 395, 170, 396, 171);//line up up
stars("white", 495, 240, 496, 241);//line right right
stars("white", 510, 200, 511, 201);//line SUPER right right
stars("white", 370, 410, 371, 411);//decending line
stars("white", 300, 440, 301, 441);//re decending line
stars("white", 310, 300, 311, 301);//line left left
stars("white", 240, 370, 241, 371);//line SUPER left left

//For Libra
stars("white", 610, 220, 611, 221);//triangle center
stars("white", 340, 220, 341, 221);//"rect after little bit..."
stars("white", 330, 200, 331, 201);//lil rect up
stars("white", 370, 360, 371, 361);//linea recta all谩
stars("white", 370, 380, 371, 381);//abajito

//For Sagittarius
stars("white", 400, 170, 401, 171);//linea recta
stars("white", 480, 370, 481, 371);//linea abajo
stars("white", 410, 140, 411, 141);//mini 1
stars("white", 480, 130, 481, 131);//mini 2
stars("white", 255, 300, 256, 301);// point between lina larga
stars("white", 400, 70, 401, 71);// upper line
stars("white", 450, 80, 451, 81);//rect recto
stars("white", 400, 30, 401, 31);//SUPER UP
stars("white", 660, 180, 661, 181);//PARA ALL脕!
stars("white", 610, 330, 611, 331);//centro triangle
stars("white", 650, 310, 651, 311);//"more"
stars("white", 460, 400, 461, 401);//m谩s abajo

//For Capricorn
stars("white", 270, 105, 271, 106);//ala arriba

//For Aquarius
stars("white", 400, 110, 401, 111);//un poco m谩s arriba
stars("white", 380, 100, 381, 101);//UN POQUITO M脕S AHHH
stars("white", 300, 150, 301, 151);//desciende
stars("white", 350, 160, 351, 161);//derecha
stars("white", 360, 240, 361, 241);//re desciende
stars("white", 300, 340, 301, 341);//re re desciende
stars("white", 440, 100, 441, 101);//hasta abajo
stars("white", 460, 210, 461, 211);//hasta el suelo

//For Pisces
stars("white", 50, 50, 51, 51);//1
stars("white", 100, 20, 101, 21);//2
stars("white", 100, 80, 101, 81);//3
stars("white", 70, 200, 71, 201);//4
stars("white", 50, 270, 51, 271);//5 abajo
stars("white", 35, 200, 36, 201);//6
stars("white", 80, 270, 81, 271);//7
stars("white", 120, 250, 121, 251);//8
stars("white", 160, 230, 161, 231);//9
stars("white", 200, 231, 201, 232);//10
stars("white", 330, 200, 331, 201);//11
stars("white", 455, 250, 456, 251);//b

  var signo= parseInt(prompt("Cu谩l es tu signo del Zodiaco? \n1 es Aries \n2 es Tauro \n3 es G茅minis \n4 es Cancer \n5 es Leo \n6 es Virgo \n7 es Libra \n8 es Escorpio \n9 es Sagitario \n10Capricornio \n11 es Acuario \n12 es Piscis"));

  if (signo== 1){//Aries
    document.write("Aries");
    star_lines("grey", 400, 170, 560, 130);//1 line
    star_lines("grey", 560, 130, 600, 280);//2 line to down
    star_lines("grey", 600, 280, 606, 310);//3 little line
    star_lines("grey", 606, 310, 590, 326);//4 fucking little little line
  }
  else if (signo== 2){//Taurus
    document.write("Tauro");
      stars("white", 360, 170, 361, 171); //1
      stars("white", 365, 174, 366, 175); //2
      stars("white", 370, 177, 371, 179); //3
      stars("white", 360, 182, 361, 183); //4
      stars("white", 365, 183, 366, 184); //5
      stars("white", 370, 184, 370, 185); //6
      star_lines("grey", 200, 50, 290, 116); //first point to nulka
      star_lines("grey", 290, 116, 380, 185); //from nulka to center
      star_lines("grey", 160, 150, 380, 185); //second point to center
      star_lines("grey", 380, 185, 450, 250); //center to cancer center
      star_lines("grey", 450, 250, 579, 230); //cancer center to diagonal 2 escorpio
      star_lines("grey", 360, 170, 500, 150); //from 1 to arm
  }
  else if (signo== 3){//G茅minis
    document.write("G茅minis");
    star_lines("grey", 20, 400, 50, 350);//left arm to center (1)
    star_lines("grey", 50, 350, 20, 330);//center to head (1)
    star_lines("grey", 50, 350, 150, 410);//center to between legs (1)
    star_lines("grey", 150, 410, 220, 450);//between legs to left leg (1)
    star_lines("grey", 150, 410, 220, 375);//between legs to right leg (1)
    star_lines("grey", 220, 450, 300, 460);//+ extra left leg (1)
    star_lines("grey", 220, 375, 300, 370);//+ extra right leg (1)

    star_lines("grey", 50, 350, 100, 320);//right arm between left arm  (1, 2)
    star_lines("grey", 100, 320, 140, 280);//right arm between left arm  (1, 2) to center of (2)
    star_lines("grey", 140, 280, 115, 255);//center to head (2)
    star_lines("grey", 140, 280, 160, 220);//center to right arm (2)
    star_lines("grey", 140, 280, 230, 280);//center to between legs (2)
    star_lines("grey", 230, 280, 270, 300);//between legs to left leg (2)
    star_lines("grey", 270, 300, 353, 300);//+ left leg with 1 puntito diagonal escorpio (2)
    star_lines("grey", 230, 280, 270, 260);//between legs to right leg
    star_lines("grey", 270, 260, 353, 265);//right leg to + extra right leg (2)
  }
  else if (signo== 4){//Cancer
    document.write("Cancer");
    star_lines("grey", 344, 400, 450, 251);//left down to center
    star_lines("grey", 610, 410, 451, 251);//right down to center
    star_lines("grey", 451, 251, 401, 171);//center to up
    star_lines("grey", 401, 171, 351, 91);//up to SUPER UP
  }
else if (signo== 5){//Leo
  document.write("Leo");
    star_lines("grey", 450, 250, 309, 335);//center of cancer to 3 puntito diagonal of escorpio
    star_lines("grey", 309, 335, 240, 450);//3 puntito diagonal of escorpio to "left leg replica (1)"
    star_lines("grey", 240, 450, 350, 390);//"left leg replica (1)" to lef down of Cancer
    star_lines("grey", 350, 390, 565, 300);//lef down of Cancer to arriba_1 diagonal of Escorpio
    star_lines("grey", 565, 300, 530, 260)//arriba_1 diagonal of Escorpio to 1 puntito diagonal replica
    star_lines("grey", 530, 260, 450, 250);//1 puntito diagonal replica to center of Cancer
    star_lines("grey", 450, 250, 420, 200);//center of Cancer to a little bit up from center of Cancer
    star_lines("grey", 420, 200, 440, 100);//little bit up from center of Cancer to copy of TAURUS arm
    star_lines("grey", 440, 100, 500, 150);//copy of TAURUS arm to TAURUS arm
}
else if (signo== 6){//Virgo
  document.write("Virgo");
    star_lines("grey", 420, 200, 353, 265);//little bit up from center of Cancer to + extra right leg (2)
    star_lines("grey", 353, 265, 420, 350);//+ extra right leg (2) to down center
    star_lines("grey", 420, 350, 470, 260);//down center to front of middle
    star_lines("grey", 470, 260, 420, 200);//front of middle to little bit up from center of Cancer
    star_lines("grey", 420, 200, 395, 170);//little bit up from center of ... to line up up
    star_lines("grey", 470, 260, 495, 240);//front of middle to line right right
    star_lines("grey", 495, 240, 510, 200);//line right right to line SUPER right right
    star_lines("grey", 420, 350, 370, 410);// down center to decending line
    star_lines("grey", 370, 410, 350, 390);//decending line to abajo izquierda of cancer
    star_lines("grey", 350, 390, 300, 440);//abajo izquierda of cancer to re decending line
    star_lines("grey", 353, 265, 310, 300);//+ extra right leg (2) to line left left
    star_lines("grey", 310, 300, 240, 370);//line left left to line SUPER left left
}
else if (signo== 7){//Libra
  document.write("Libra");
    star_lines("grey", 500, 150, 565, 300);//TAURUS arm to 1 puntito diagonal escorpio
    star_lines("grey", 500, 150, 610, 220);//TUARUS arm to triangle center
    star_lines("grey", 565, 300, 610, 220);//1 puntito diagonal escorpio to triangle center
    star_lines("grey", 500, 150, 420, 200);//TAURUS arm to little bit up from center of Cancer
    star_lines("grey", 420, 200, 340, 220);//little bit up from center of Cancer to "rect after little bit..."
    star_lines("grey", 340, 220, 330, 200);//"rect after little bit..." to lil rect up
    star_lines("grey", 565, 300, 370, 360);//diagonal escorpio to linea recta all谩
    star_lines("grey", 370, 360, 370, 380);//linea recta all谩 to abajito
}
else if (signo== 8){//Escorpio
  document.write("Escorpio");
    star_lines("grey", 353, 300, 328, 320);//1 to 2
    star_lines("grey", 328, 320, 309, 335);//2 to 3 puntitos diagonales
    star_lines("grey", 309, 335, 350, 390);//3 punti... to abajo izquierda of Cancer
    star_lines("grey", 350, 390, 450, 400);//abajo izquierda of Cancer to centro abajo
    star_lines("grey", 450, 400, 550, 390);//centro abajo to derecha abajo
    star_lines("grey", 550, 390, 565, 300);// derecha abajo to arriba_1 diagonal
    star_lines("grey", 565, 300, 579, 230);//arriba_1 diagonal to arriba_2 diagonal
    star_lines("grey", 579, 230, 584, 150);//arriba_2 diagonal to arriba_3 diagonal
    star_lines("grey", 584, 150, 600, 130);//arriba_3 diagonal to arriba un poquito diagonal
    star_lines("grey", 600, 130, 750, 60);//arriba un poquito diagonal to punto 1 largo
    star_lines("grey", 600, 130, 760, 100);//arriba un poquito diagonal to punto 2 largo
    star_lines("grey", 600, 130, 755, 140);//arriba un poquito diagonal to punto 3 largo
}
else if (signo== 9){//Sagitario
  document.write("Sagitario");
  star_lines("grey", 500, 150, 565, 300);//TAURUS arm to 1 puntito diagonal escorpio
  star_lines("grey", 500, 150, 610, 220);//TUARUS arm to triangle center
  star_lines("grey", 565, 300, 610, 220);//1 puntito diagonal escorpio to triangle center
  star_lines("grey", 500, 150, 400, 170);//TAURUS arm to linea recta
  star_lines("grey", 400, 170, 480, 370);//linea recta to linea abajo
  star_lines("grey", 480, 370, 565, 300);//linea abajo to retorno (1 puntito diagonal)

  star_lines("grey", 400, 170, 410, 140);//linea recta to mini 1
  star_lines("grey", 410, 140, 480, 130);//mini 1 to mini 2
  star_lines("grey", 480, 130, 500, 150);//mini 2 to TAURUS arm

  star_lines("grey", 410, 140, 290, 116);//mini 1 to nulka
  star_lines("grey", 290, 116, 160, 150);//nulka to second point (Taurus)
  star_lines("grey", 160, 150, 300, 370);//second point to + extra right leg (1)
  star_lines("grey", 300, 370, 370, 360);//SUPER left... to linea recta all谩 (Libra)
  star_lines("grey", 300, 370, 370, 410);//SUPER Left... to  decending line (Virgo)
  star_lines("grey", 480, 130, 470, 70);// from mini 2 to upper line
  star_lines("grey", 470, 70, 450, 80);//upper line to rect recto
  star_lines("grey", 450, 80, 400, 30);//SUPER UP
  star_lines("grey", 610, 220, 660, 180);//Triangle center to para ALL脕!

  star_lines("grey", 480, 370, 610, 330);//linea abajo to center Triangle
  star_lines("grey", 565, 300, 610, 330);//1 puntito diagonal to center Triangle
  star_lines("grey", 610, 330, 650, 310);//center Triangle to "more"
  star_lines("grey", 480, 370, 460, 400);//linea abajo to m谩s abajo
}
else if (signo== 10){//Capricornio
  document.write("Capricornio");
  star_lines("grey", 560, 130, 410, 140);// 1 (Aries) to mini 1
  star_lines("grey", 410, 140, 290, 116);//mini 1 to nulka
  star_lines("grey", 290, 116, 270, 105);//nulka to ala arriba
  star_lines("grey", 270, 105, 470, 260);//ala arriba to front of middle
  star_lines("grey", 470, 260, 560, 130);//frontof middle to 1 (Aries)
}
else if (signo== 11){//Acuario
  document.write("Aquario");
  star_lines("grey", 579, 230, 500, 150);//arriba 2 diagonal to taurus arm
  star_lines("grey", 500, 150, 440, 100);//Taurus arm to Leo
  star_lines("grey", 440, 100, 400, 110);//Leo to un poco m谩s arriba
  star_lines("grey", 400, 110, 380, 100);//un poco m谩s arriba to UN POQUITO M脕S AHHH
  star_lines("grey", 380, 100, 300, 150);//UN POQUITO M脕S AHHH to desciende
  star_lines("grey", 300, 150, 350, 160);//desciendde do derecha
  star_lines("grey", 350, 160, 360, 240);//derecha to re desciende
  star_lines("grey", 360, 240, 300, 340);//re dessciende to re re desciende

  star_lines("grey", 440, 100, 420, 150);//Leo to hasta abajo
  star_lines("grey", 420, 150, 460, 210);//hasta to hasta el suelo
}
else if (signo== 12){//Piscis
  document.write("Piscis");
  star_lines("grey", 50, 50, 100, 20);//1 to 2
  star_lines("grey", 50, 50, 100, 80);//2 to 3
  star_lines("grey", 100, 20, 100, 80);//2 to 3
  star_lines("grey", 100, 80, 70, 200);//3 to 4
  star_lines("grey", 70, 200, 50, 270);//4 to 5 abajo
  star_lines("grey", 50, 270, 35, 300);//5 to 6
  star_lines("grey", 35, 300, 80, 270);//6 to 7
  star_lines("grey", 80, 270, 120, 250);//7 to 8
  star_lines("grey", 120, 250, 160, 230);//8 to 9
  star_lines("grey", 160, 230, 200, 231);//9 to 10
  star_lines("grey", 200, 231, 330, 200);//10 to lil rect up (libra)
  star_lines("grey", 330, 200, 420, 200);//11 to un punto
  star_lines("grey", 420, 200, 460, 210);//un punto to hasta el suelo
  star_lines("grey", 420, 200, 430, 230);//un punto a center of cancer
  star_lines("grey", 460, 210, 480, 240);//un punto to hasta el suelo
  star_lines("grey", 430, 230, 455, 250);//center of cancer to b
  star_lines("grey", 455, 250, 480, 240);//b to hasta el el suelo
}
else {
  document.write("Espero que hayas disfrutado de las estrellas")
}

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

}

Aqu铆 les comparto!
![](

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

Luego de varias horas logr茅 lo siguiente:

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

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

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

}

![](

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

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.

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

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

TU LO CREAS , TU LO INVENTAS

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

![](

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

dibujo.js

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


// DOM
var ran_lineas = document.getElementById("ran_lineas");
var txt_lineas = document.getElementById("txt_lineas");
var ran_a_pasos_punto = document.getElementById("ran_a_pasos_punto");
var txt_a_pasos_punto = document.getElementById("txt_a_pasos_punto");
var ran_a_posicion_inicial = document.getElementById("ran_a_posicion_inicial");
var txt_a_posicion_inicial = document.getElementById("txt_a_posicion_inicial");
var ran_b_pasos_punto = document.getElementById("ran_b_pasos_punto");
var txt_b_pasos_punto = document.getElementById("txt_b_pasos_punto");
var ran_b_posicion_inicial = document.getElementById("ran_b_posicion_inicial");
var txt_b_posicion_inicial = document.getElementById("txt_b_posicion_inicial");
var col_color = document.getElementById("col_color");
var txt_color = document.getElementById("txt_color");

// VALORES DE FIGURA
var lineas_maximas = 509;
var lineas = 509;
//
var a_posicion_inicial = 0;
var a_pasos_punto = 3;
var b_posicion_inicial = 0;
var b_pasos_punto = 8;
//
var radio = 140
var centro_x = 150;
var centro_y = 150;
//
var color = "#FFB6C1";

var angulo_por_paso = Math.PI * 2 / lineas;

// ARRANCAR:
actualizarDomCampos();
dibujarCanvas();
// eventos
ran_lineas.addEventListener("change", alCambiarBalores);
txt_lineas.addEventListener("change", alCambiarBalores);
ran_a_pasos_punto.addEventListener("change", alCambiarBalores);
txt_a_pasos_punto.addEventListener("change", alCambiarBalores);
ran_a_posicion_inicial.addEventListener("change", alCambiarBalores);
txt_a_posicion_inicial.addEventListener("change", alCambiarBalores);
ran_b_pasos_punto.addEventListener("change", alCambiarBalores);
txt_b_pasos_punto.addEventListener("change", alCambiarBalores);
ran_b_posicion_inicial.addEventListener("change", alCambiarBalores);
txt_b_posicion_inicial.addEventListener("change", alCambiarBalores);
col_color.addEventListener("change", alCambiarBalores);
txt_color.addEventListener("change", alCambiarBalores);


// funciones
function alCambiarBalores(event) {
	// capturo valor nuevo
	console.log(event.target.id);

	var valor;
	switch (event.target.id) {
		case "txt_lineas":
		case "ran_lineas":
			valor = parseInt(event.target.value);
			if (isNaN(valor)) valor = 509; // por defecto
			valor = Math.min(Math.max(1, valor), 509); // 1 - 509
			lineas = valor;

			a_posicion_inicial = Math.abs(a_posicion_inicial % lineas); // 
			a_pasos_punto = Math.min(Math.max(1 - lineas, a_pasos_punto), lineas - 1);
			b_posicion_inicial = Math.abs(b_posicion_inicial % lineas); // 
			b_pasos_punto = Math.min(Math.max(1 - lineas, b_pasos_punto), lineas - 1);
			break;
		case "txt_a_posicion_inicial":
		case "ran_a_posicion_inicial":
			valor = parseInt(event.target.value);
			if (isNaN(valor)) valor = 0; // por defecto
			valor = valor % lineas; // 
			valor = Math.min(Math.max(1 - lineas, valor), lineas - 1);
			a_posicion_inicial = valor;
			break;
		case "txt_a_pasos_punto":
		case "ran_a_pasos_punto":
			valor = parseInt(event.target.value);
			if (isNaN(valor)) valor = 1; // por defecto
			valor = valor % lineas; // 
			valor = Math.min(Math.max(1 - lineas, valor), lineas - 1);
			a_pasos_punto = valor;
			break;
		case "txt_b_posicion_inicial":
		case "ran_b_posicion_inicial":
			valor = parseInt(event.target.value);
			if (isNaN(valor)) valor = 0; // por defecto
			valor = valor % lineas; // 
			valor = Math.min(Math.max(1 - lineas, valor), lineas - 1);
			b_posicion_inicial = valor;
			break;
		case "txt_b_pasos_punto":
		case "ran_b_pasos_punto":
			valor = parseInt(event.target.value);
			if (isNaN(valor)) valor = 1; // por defecto
			valor = valor % lineas; // 
			valor = Math.min(Math.max(1 - lineas, valor), lineas - 1);
			b_pasos_punto = valor;
			break;
		case "txt_color":
		case "col_color":
			color = event.target.value;
			break;
	}

	//
	actualizarDomCampos();

	//
	lienzo.clearRect(0, 0, 300, 300);
	dibujarCanvas();
}

function dibujarCanvas() {
	angulo_por_paso = Math.PI * 2 / lineas;
	// dibuja las lineas
	for (var i = 0; i < lineas; i++) {
		var angulo;
		// punto A
		angulo = angulo_por_paso * ((i + a_posicion_inicial) * a_pasos_punto) - (Math.PI / 2);
		var ax = centro_x + radio * Math.cos(angulo);
		var ay = centro_y + radio * Math.sin(angulo);
		// punto B
		angulo = angulo_por_paso * ((i + b_posicion_inicial) * b_pasos_punto) - (Math.PI / 2);
		var bx = centro_x + radio * Math.cos(angulo);
		var by = centro_y + radio * Math.sin(angulo);
		// 
		dibujarLinea(color, ax, ay, bx, by);
	}
}

function dibujarLinea(color, ax, ay, bx, by) {
	lienzo.beginPath();
	lienzo.strokeStyle = color;
	lienzo.moveTo(ax, ay);
	lienzo.lineTo(bx, by);
	lienzo.stroke();
	lienzo.closePath();
}

function actualizarDomCampos() {

	//
	ran_a_pasos_punto.min = 1 - lineas;
	ran_a_pasos_punto.max = lineas - 1;
	ran_a_posicion_inicial.min = 1 - lineas;
	ran_a_posicion_inicial.max = lineas - 1;
	ran_b_pasos_punto.min = 1 - lineas;
	ran_b_pasos_punto.max = lineas - 1;
	ran_b_posicion_inicial.min = 1 - lineas;
	ran_b_posicion_inicial.max = lineas - 1;

	//
	ran_lineas.value = lineas;
	txt_lineas.value = lineas;
	ran_a_pasos_punto.value = a_pasos_punto;
	txt_a_pasos_punto.value = a_pasos_punto;
	ran_a_posicion_inicial.value = a_posicion_inicial;
	txt_a_posicion_inicial.value = a_posicion_inicial;
	ran_b_pasos_punto.value = b_pasos_punto;
	txt_b_pasos_punto.value = b_pasos_punto;
	ran_b_posicion_inicial.value = b_posicion_inicial;
	txt_b_posicion_inicial.value = b_posicion_inicial;
	col_color.value = color;
	txt_color.value = col_color.value;
}

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>馃尭Sakura</title>
	</head>
	<body>
		<h1>馃尭Sakura</h1>
		<table>
			<caption>VALORES</caption>
			<thead>
				<tr>
					<th>variable</th>
					<th>controlador</th>
					<th>valor</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Numero de lineas</td>
					<td><input type="range" max="509"  min="1" id="ran_lineas"></td>
					<td><input type="text" id="txt_lineas"></span></td>
				</tr>
				<tr>
					<td>Pasos punto A</td>
					<td><input type="range" max="-499"  min="-499" value="1" id="ran_a_pasos_punto"></td>
					<td><input type="text" id="txt_a_pasos_punto"></span></td>
				</tr>
				<tr>
					<td>Pasos punto B</td>
					<td><input type="range" max="-499"  min="-499" value="1" id="ran_b_pasos_punto"></td>
					<td><input type="text" id="txt_b_pasos_punto"></span></td>
				</tr>
				<tr>
					<td>Posicion inicial A</td>
					<td><input type="range" max="0"  min="-499" id="ran_a_posicion_inicial"></td>
					<td><input type="text" id="txt_a_posicion_inicial"></span></td>
				</tr>
				<tr>
					<td>Posicion inicial B</td>
					<td><input type="range" max="0"  min="-499" value="1" id="ran_b_posicion_inicial"></td>
					<td><input type="text" id="txt_b_posicion_inicial"></span></td>
				</tr>
				<tr>
					<td>Color</td>
					<td><input type="color" value="#FF9999" id="col_color"></td>
					<td><input type="text" id="txt_color"></span></td>
				</tr>
			</tbody>
		</table>
		<canvas width="300" height="300" id="dibujo"></canvas>
		<script type="text/javascript" src="dibujo.js"></script>
	</body>
</html>

var textoTipo = document.getElementById("textoTipo");
var textoLineas = document.getElementById("textoLineas");

var boton = document.getElementById("envio");
boton.addEventListener("click", dibujoClick);

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

function dibujoClick()
{
  var tipo = parseInt(textoTipo.value);
  var n_lineas = parseInt(textoLineas.value);

if(tipo==1)
  {
    for(i=0; i<n_lineas; i++)
    {
      var espacio = (ancho/2)/n_lineas

      var yo = espacio * i;
      var xf = (ancho/2)-(espacio * (i+1));
      dibujarLinea("#6e2dfa", ancho/2, yo, xf, alto/2);

      var xo2 = espacio * i;
      var yf2 = (alto/2)+(espacio * (i+1));
      dibujarLinea("#59ffec", xo2, alto/2, ancho/2,yf2);

      var xo3 = 300-(espacio * i);
      var yf3 = (alto/2)+(espacio * (i+1));
      dibujarLinea("#6e2dfa", xo3, alto/2, ancho/2, yf3);

      var yo4 = espacio * i;
      var xf4 = (ancho/2)+(espacio * (i+1));
      dibujarLinea("#59ffec", ancho/2, yo4, xf4, alto/2);
    }
  } else if (tipo == 2)
  {
    dibujarLinea("black", 0, 0, 0, 300);
    dibujarLinea("black", 0, 300, 300, 300);
    dibujarLinea("black", 300, 300, 300, 0);
    dibujarLinea("black", 300, 0, 0, 0);

    for(i=0; i<n_lineas; i++)
    {
      var espacio2 = ancho/n_lineas;
      var yo = espacio2 * i;
      var xf = espacio2 * (i+1);
      dibujarLinea("#6e2dfa", 0, yo, xf, alto);

      var xo2 = espacio2 * i;
      var yf2 = (alto)-(espacio2 * (i+1));
      dibujarLinea("#6e2dfa", xo2, alto, ancho,yf2);

      var xo3 = espacio2 * i;
      var yf3 = espacio2 * (i+1);
      dibujarLinea("#6e2dfa", xo3, 0, ancho, yf3);

      var yo4 = espacio2 * i;
      var xf4 = (ancho)-(espacio2 * (i+1));
      dibujarLinea("#6e2dfa", 0, yo4, xf4, 0);
    }
  }
}

function dibujarLinea(color,xo, yo, xf, yf)
{
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.moveTo(xo, yo);
  lienzo.lineWidth = 1;
  lienzo.lineTo(xf, yf);
  lienzo.stroke();
  lienzo.closePath();
}

Bueno despu茅s de varios d铆as pude terminar como lo quer铆a馃槄 aqu铆 el usuario puede elegir cuantas l铆neas quiere en las esquinas y puede darle a cada una el color que guste, al igual que dos de las tres l铆neas del dibujo del medio puede asignarle un color distinto a c/u
![](

Saludos.

Para el que lo necesite:

C谩lmate que si se puede lee con calma tu c贸digo y trata de entender bien lo que has escrito, itera cambiando cosas siempre tienes a ctrl + z para regresar.
Sigue intentando que al final lo lograras

`<code>

Ac谩 va 馃槂

var d = document.getElementById("dibujito");
var lienzo = d.getContext("2d");
var med_max = d.width;
var med_min = 0;
var texto_lineas = document.getElementById("texto_lineas");
var btn_lineas = document.getElementById("boton_lineas");

btn_lineas.addEventListener("click", dibujoPorClic);

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

    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 dibujoPorClic(){
    // Borra el lienzo cada vez que se invoca la funci贸n
    lienzo.clearRect(0, 0, d.width, d.height)
    
    var lineas = parseInt(texto_lineas.value);
    var espacio = med_max/lineas;

    for (l = 0; l <= lineas; l++) 
    {
    dibujarLinea("blue", med_min, l*espacio, l*espacio, med_max);
    dibujarLinea("blue", l*espacio,med_max, med_max, med_max-(l*espacio));
    dibujarLinea("blue", med_max-(l*espacio),med_min, med_min, l*espacio);
    dibujarLinea("blue", med_max, med_max-(l*espacio), med_max-(l*espacio), med_min);
    dibujarLinea("black", med_max/2,med_max/2, l*espacio, med_min);
    dibujarLinea("black", med_max/2,med_max/2, med_max, l*espacio);
    dibujarLinea("black", med_max/2,med_max/2, l*espacio, med_max);
    dibujarLinea("black", med_max/2,med_max/2, med_min, l*espacio);
     
    console.log(l);
    }
}

var d = document.getElementById(鈥渄ibujito鈥);
var ancho = d.width;
var lienzo = d.getContext(鈥2d鈥);
var texto = document.getElementById(鈥榯ext_Lineas鈥);
var boton = document.getElementById(鈥榖otoncito鈥);
boton.addEventListener(鈥榗lick鈥, dibujoPorClick );

function dibujarLinea(color, xInicial, yInicial, xFinal, yFinal){
lienzo.beginPath();
lienzo.strokeStyle = color;
lienzo.moveTo(xInicial, yInicial);
lienzo.lineTo(xFinal, yFinal);
lienzo.stroke();
lienzo.closePath();
}
// A帽ade colores a las lineas
function add_color(num,espacio){
var yellow = document.getElementById(鈥榊ellow鈥).value;
var blue = document.getElementById(鈥楤lue鈥).value;
var red = document.getElementById(鈥楻ed鈥).value;
let espa = (espacio / 3);
if(num <= (espa) ){
return yellow;
}
if(num > (espa+0.5) && num <= (espa * 2)){
return blue;
}
if(num > espa * 2 && num <= espacio){
return red;
}

}

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

// lineas 
dibujarLinea("#fff", 1, 1, 1, 299);
dibujarLinea("#fff", 0, 299, 299, 299);
dibujarLinea("#fff", 1, 1, 299, 0);
dibujarLinea("#fff", 299, 299, 299, 0);
// Malla lateral izquierda
while(l < lineas){
	yi = espacio * l;
	xf = espacio * (l +1);
	dibujarLinea(add_color(l,numL), 0, yi, xf, 300);
	l +=0.25;
}
// Malla lateral derecha
for(let i = 0; l2 < lineas2; i++){
	xi = espacio * l2;
	yf = espacio * (l2 + 1);
	dibujarLinea(add_color(l2,numL), xi, 0, 300, yf);
	l2 +=0.25;
}

}

// H1 V1 H2 V2 Box 1
dibujarLinea(鈥減urple鈥, 140, 140, 150, 140);//H Top
dibujarLinea(鈥渂lue鈥, 140, 150, 150, 150);// H Bottom
dibujarLinea(鈥渞ed鈥, 140, 150, 140, 140);// V Left
dibujarLinea(鈥減ink鈥, 150, 140, 150, 150);// V Right
// H1 V1 H2 V2 Box 2
dibujarLinea(鈥減urple鈥, 130, 130, 160, 130);//H Top
dibujarLinea(鈥渞ed鈥 , 130, 130, 130, 160);// V Left
dibujarLinea(鈥渂lue鈥, 130, 160, 160, 160);// H Bottom
dibujarLinea(鈥減ink鈥, 160, 160, 160, 130);// V Right
// H1 V1 H2 V2 Box 3
dibujarLinea(鈥減urple鈥, 120, 120, 170, 120);//H Top
dibujarLinea(鈥渞ed鈥 , 120, 120, 120, 170);// V Left
dibujarLinea(鈥渂lue鈥, 120, 170, 170, 170);// H Bottom
dibujarLinea(鈥減ink鈥, 170, 170, 170, 120);// V Right
// H1 V1 H2 V2 Box 4
dibujarLinea(鈥減urple鈥, 110, 110, 180, 110);//H Top
dibujarLinea(鈥渞ed鈥 , 110, 110, 110, 180);// V Left
dibujarLinea(鈥渂lue鈥, 110, 180, 180, 180);// H Bottom
dibujarLinea(鈥減ink鈥, 180, 180, 180, 110);// V Right
// H1 V1 H2 V2 Box 5
dibujarLinea(鈥減ink鈥, 100, 100, 190, 100);//H Top
dibujarLinea(鈥渞ed鈥 , 100, 100, 100, 190);// V Left
dibujarLinea(鈥渂lue鈥, 100, 190, 190, 190);// H Bottom
dibujarLinea(鈥減ink鈥, 190, 190, 190, 100);// V Right

// transversal
dibujarLinea(鈥減ink鈥, 140, 140, 0, 0);// Top L
dibujarLinea(鈥減ink鈥, 150, 140, 300, 0);// Top R
dibujarLinea(鈥減ink鈥, 150, 150, 300, 300);//Bottom R
dibujarLinea(鈥減ink鈥, 140, 150, 0, 300);// Bottom L

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

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

Despues de dos dias acabe
c贸digo

tambien utilice css para que se vea un poco m谩s bonito

Lo que seg煤n he aprendido hasta estos v铆deos y los ejemplos que dan los dem谩s, me pongo triste 馃槮

Para el RETO hice un gratificador de funciones lineales (solo con coeficientes y constante positivas).

![](

var textoX = document.getElementById("texto_x");
var textoConstante = document.getElementById("texto_constante");
var botonGraficar = document.getElementById("botoncito");
botonGraficar.addEventListener("click", dibujoPorClick);

var di = document.getElementById("dibujito");
var anchoCanvas = di.width;
var altoCanvas = di.height;
var lienzo = di.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("black", anchoCanvas/2, 0, anchoCanvas/2, altoCanvas );//grafica el eje y
dibujarLinea("black", 0, altoCanvas/2 , anchoCanvas, altoCanvas/2 );//grafica el eje x

for (var i = 0; i <= 22 ; i++) //grafica la cuadricula
{
  dibujarLinea("#BEBEC8", i * (anchoCanvas/22), 0, i * (anchoCanvas/22), altoCanvas );//grafica cuadricula el eje y
  dibujarLinea("#BEBEC8", 0,  i * (altoCanvas/22), anchoCanvas, i * (altoCanvas/22) );//grafica cuadricula el eje y
}

function dibujoPorClick()
{
  //calcular los puntos de la linea recta
  var valorCoeficienteX = parseInt(textoX.value);
  var calcularXinf = parseInt(anchoCanvas)/2; //este valor es para guiarse
  var calcularYinf = (altoCanvas/2) - ((parseInt(textoConstante.value)*(altoCanvas/22))+1);
  var calcularXmax =  (anchoCanvas/22)*19;// valor aproximado hacia la derecha que son el numero de la cuadricula en x
  var calcularYmax = (altoCanvas/2)-(((valorCoeficienteX * (((anchoCanvas/22)*8))) + ((parseInt(textoConstante.value)*(altoCanvas/22)))));
   // en la anterior linea se divide en "8" y no en 19 o 18, por que la pendiente se toma en el primer cuadrante o la mitad del canvas
  //dibujarLinea("blue", (anchoCanvas/2) + valorCoeficienteX, (altoCanvas/2) + calcularXinf,  )
    dibujarLinea("blue", calcularXinf, calcularYinf, calcularXmax, calcularYmax);
    console.log(calcularXinf);
    console.log(textoX);
}```

As铆 es como quedo mi dibujo, me costo mucho trabajo encontrar los algoritmos que me dieran esa figura, soy un principiante pero despu茅s de mucha paciencia logre terminarlo.