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

Primer servidor web con express

25

Modelo Cliente/Servidor

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

A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Ciclos while y for en JavaScript

14/37
Recursos

Los ciclos son piezas de c贸digo que se ejecutan de manera c铆clica, es decir, que se repiten una y otra vez, al menos hasta que se cumpla una condici贸n que interrumpa el ciclo.

Un ciclo Infinito sucede cuando se invoca a un ciclo sin determinar una condici贸n limitante, el ciclo se repite infinitamente, lo que puede causar que se caiga el programa por estar sobrecarg谩ndose de demasiadas operaciones sin fin.

Un ciclo DO WHILE ejecuta una secuencia especificada hasta que se cumpla una condici贸n determinada que act煤a de limitante. Como primero se ejecuta la sentencia y luego se eval煤a la condici贸n, este se ejecuta como m铆nimo una vez.

En cualquier lenguaje de programaci贸n, y durante una operaci贸n aritm茅tica, se ejecutan en primer t茅rmino las operaciones que se encuentran entre los par茅ntesis.

Recuerda:

  • Ten cuidado de no crear ciclos infinitos que bloqueen el navegador.

Contribuci贸n creada por: Gustavo Daniel Franco Gonzalez

Aportes 7038

Preguntas 695

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

Dibuje la portada del 谩lbum 鈥淭he Dark Side Of The Moon鈥 (Pink Floyd) utilizando lo aprendido.

隆Espero les guste! 馃槂

馃惐鈥嶐煉 Reutilizando c贸digo para cumplir con las especificaciones.

var d = document.getElementById("dibujito");
var lienzo = d.getContext("2d");
var lineas = 30;
var l = 0;
var yi, xf;
var colorcito = "red";

for(l = 0; l<lineas; l++){
    yi = 10 * l;
    xf = 10 * (l + 1);
    dibujarLinea(colorcito, 0, yi, xf, 300);
    console.log("Linea "+l);
}
dibujarLinea(colorcito, 1, 1, 1, 300);
dibujarLinea(colorcito, 1, 299, 299, 299);

colorcito = "blue"
for(l = 0; l<lineas; l++){
    yi = 10 * (l + 1);
    xf = 10 * l;
    dibujarLinea(colorcito, 300, yi, xf, 0);
    console.log("Linea "+l);
}
dibujarLinea(colorcito, 299, 299, 299, 1);
dibujarLinea(colorcito, 299, 1, 1, 1);

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

dejo mi aporte
El ciclo de un hex谩gono que se va haciendo mas peque帽o a la vez que va rotando

(

Hola a todos, aprendiendo y poniendo a prueba lo aprendido.
ESTO FUE LO QUE LOGRE HACER !!! : )

Mi peque帽o dibujo.

Mis Apuntes en Clase:

  • Ciclos => Son piezas de c贸digo que se ejecutan de manera c铆clica , hasta que se cumpla una condici贸n determinada que act煤a de limitante.
  • Ciclo Infinito => Sucede cuando se invoca a un ciclo sin determinar una condici贸n limitante, el ciclo se repite infinitamente.
  • En cualquier lenguaje de programaci贸n, y durante una operaci贸n aritm茅tica, se ejecutan en primer t茅rmino las operaciones que se encuentran entre los par茅ntesis.
  • Reto de Investigaci贸n:
    *** Un ciclo DO WHILE ejecuta una secuencia especificada hasta que se cumpla una condici贸n determinada que act煤a de limitante, como primero se ejecuta la sentencia y luego se eval煤a la condici贸n, este se ejecuta como m铆nimo una vez. ***

Este hice yo, me tom贸 un buen rato

Un peque帽o meme que explica la diferencia entre bucles do while y while


mi ejercicio con algunas adicciones =)

Este es el dibujo que hice. Quer铆a hacer una figura solamente con los ciclos While y For, y lo logr茅. Me siento muy feliz y orgullosa por esto, este era el reto que me hab铆a impuesto y estoy emocionada por ver el avance que he tenido.
.

Aqu铆 est谩 el c贸digo, si tienen alguna forma de mejorarlo estar铆a encantada de leerlos.

var d = document.getElementById("dibujo_para_practica");
var lienzo = d.getContext("2d");
var lineas = 15;
var lineas_second = 20;
var lineas_third = 9;
var lineas_fourth = 12;
var l = 0;
var l_second = 0;
var l_third = 0;
var l_fourth = 0;
var l_fifth = 0;
var l_sixth = 0;
var l_sept = 0;
var l_eight = 0;
var l_nine = 0;
var l_tenth = 0;
var xi, yi, xf, yf;

drawingLine("blue", 1, 1, 1, 399);
drawingLine("blue", 1, 399, 399, 399);
drawingLine("blue", 399, 399, 399, 1);
drawingLine("blue", 1, 1, 399, 1);


while(l < lineas)
{
  yf = 400 - (l * 20);
  drawingLine("blue", 240, 400, 0, yf);
  l = l + 1;
}

for (l_second = 0; l_second < lineas; l_second++)
{
  yf = 400 - (l_second * 20);
  drawingLine("blue", 180, 400, 400, yf);
}

for(l_third = 0; l_third < lineas_third; l_third++)
{
  xi = 240 - (l_third * 20);
  yf = 120 - (l_third * 20);
  drawingLine("blue", xi, 400, 0, yf);
}

for(l_fourth = 0; l_fourth < lineas_third; l_fourth++)
{
  xi = 180 + (l_fourth * 20);
  yf = 120 - (l_fourth * 20);
  drawingLine("blue", xi, 400, 400, yf);
}

for(l_fifth = 0; l_fifth < lineas_third; l_fifth++)
{
  yi = 280 - (l_fifth * 20);
  xf = 40 + (l_fifth * 20);
  drawingLine("blue", 0, yi, xf, 0);
}

for(l_sixth = 0; l_sixth < lineas_third; l_sixth++)
{
  yi = 280 - (l_sixth * 20);
  xf = 360 - (l_sixth * 20);
  drawingLine("blue", 400, yi, xf, 0);
}

for(l_sept = 0; l_sept < lineas_fourth; l_sept++)
{
  yi = 140 - (l_sept * 10);
  yf = 0 + (l_sept * 10);
  drawingLine("blue", 0, yi, 200, yf);
}

for(l_eight = 0; l_eight < lineas_fourth; l_eight++)
{
  yi = 140 - (l_eight * 10);
  yf = 0 + (l_eight * 10);
  drawingLine("blue", 400, yi, 200, yf);
}

for(l_nine = 0; l_nine < lineas_fourth; l_nine++)
{
  xi = 0 + (l_nine * 18);
  drawingLine("blue", xi, 0, 200, 120);
}

for(l_tenth = 0; l_tenth < lineas_fourth; l_tenth++)
{
  xi = 400 - (l_tenth * 18);
  drawingLine("blue", xi, 0, 200, 120);
}

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

Me tom茅 varias horas experimentando con esto pero fue divertido.
Aqu铆 uno de mis resultados:

JavaScript:

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

var my_gradient = lienzo.createLinearGradient(0, 0, 0, 470); //Un codigo de gradiente que encontre
my_gradient.addColorStop(0, "blue");
my_gradient.addColorStop(1, "purple");
lienzo.fillStyle = my_gradient;
lienzo.fillRect(0, 0, 1500, 600);


var xi, yi, xf, yf; //variables para la funcion de dibujo de lineas
var lv = 0; // Lineas Verticales
var ld = 0; //lineas derechas
var li = 0; //lineas izuqierdas
var colores = "violet";
var f = 750; //variable para la malla del medio
var i = 0; //variable para la malla del medio

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

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

dibujoLineas(colores, 0, 250, 100, 100) //Piramide izquierda
dibujoLineas(colores, 100, 100, 200, 300)
dibujoLineas(colores, 300, 300, 100, 100)

dibujoLineas(colores, 1500, 250, 1350, 100) //piramide derecha
dibujoLineas(colores, 1350, 100, 1300, 300)
dibujoLineas(colores, 1200, 300, 1350, 100)

dibujoLineas("cyan", 750, 300, 750, 600) //linea del medio

dibujoLineas ("violet") //Circulo
lienzo.arc(750, 300, 400, Math.PI, Math.PI * 2);
lienzo.stroke();


while (lv <= 40) { //lineas horizintales
  lv = lv + 1;
  dibujoLineas("cyan ", 0, yi, 1500, yf)
  yi = 290 + (lv * 10);
  yf = 290 + (lv * 10);

}

while (ld <= 1000) { //lineas verticales izqueirdas
  ld = ld + 40;
  dibujoLineas("cyan", xi, 300, xf, 600)
  xi = 790  - ld;
  xf = 750 - (ld * 2);
}

while (li <= 1000) { //lineas verticales derechas
  li = li + 40;
  dibujoLineas("cyan", xi, 300, xf, 600)
  xi = 710 + li;
  xf = 750 + (li * 2);
}


while (i <= 300) //malla derecha
{
dibujoLineas("cyan", 750, i, f, 300)
i = i + 10;
f=f+10;
}

var f = 750; //malla izquierda
var i = 0;
while (i <= 300)
{
dibujoLineas("cyan", 750, i, f, 300)
i = i + 10;
f=f-10;
}

html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Dibujo 2</title>
  </head>

  <body style="background-color:black;">
    <h1 style = "font-family: Monospace;">
    <center> <p style="color:white";>Dibujo Canvas NewRetroWave</p> </center> </h1>

    <canvas id="dibujito2" width="1500" height="600" style="border: 10px solid #9370DB;"></canvas>


<script src="dibujo2.js" charset="utf-8"></script>
</body>
</html>

Hola chicos, tarde much铆simo para resolverlo pero lo logr茅 , estoy muy Felizzz!
si tienen , alguna correcci贸n, aporte o sugerencia ser谩 bien recibido ,gracias鈥


Recomiendo que en su editor de codigo instalen un live server, asi pueden usar la mitad de su pantalla sin la necesidad de recargar la pagina鈥︷煠 aunque de acuerdo con la metodologia no deberiamos aprender intentanto todas las opciones posibles y hacer una solucion elaborada por nosotros mismos.

Ya que hay varias respuestas muy interesantes decid铆 proponer una nueva variando un poco el c贸digo.
Es el fractal de Koch, es una funci贸n que se llama varias veces a s铆 misma para dibujar un patr贸n una y otra vez. Este fractal no requiere de mucho c贸digo y genera una especie de copo de nieve.
Tambi茅n le agregue texto y una funci贸n para que cada l铆nea se coloree de un color diferente dependiente de sus coordenadas X, Y para que fuera m谩s vistoso.
Le puse unos contadores para dimensionar la cantidad de l铆neas que contiene.

Espero les guste 馃槂

HTML:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <canvas style="border:solid 1px black; background-color:#f2f2f2;" id="dibujito" width="300" height="300" ></canvas>
    <script src="fractal.js"></script>
  </body>
</html>

JS:

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

var xp1=300;
var yp1=200;
var xp2=0;
var yp2=200;
var sin60=Math.sin(3.14/3);
var nivel_de_recursividad=6;
var iteraciones =0;
var lineas =0;

//dibujo del fractal, con funci贸n iterativa
fractalKoch(nivel_de_recursividad,xp1,yp1,xp2,yp2);

//Algo de texto
lienzo.font = "14px Arial";
lienzo.fillText("Fractal: Curva de Koch ",10,20);
lienzo.fillText("Iteraciones: "+ iteraciones,10,40);
lienzo.fillText("L铆neas: "+ lineas,10,60);



function dibujaLinea(color, XI,YI,XF,YF)
{
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.moveTo(XI,YI);
  lienzo.lineTo(XF,YF);
  lienzo.stroke();
  lienzo.closePath();
}


function fractalKoch ( i, xp12, yp12, xp22, yp22)
{

  var dx=(xp22-xp12)/3;
  var dy=(yp22-yp12)/3;
  var xx=xp12+3*dx/2-dy*sin60;
  var yy=yp12+3*dy/2+dx*sin60;
  if(i<=0){
       dibujaLinea(getColor(xp12,yp12),xp12,yp12,xp22,yp22);
       lineas++;
  }
  else{
      fractalKoch(i-1,xp12,yp12,xp12+dx,yp12+dy);
      fractalKoch(i-1,xp12+dx,yp12+dy,xx,yy);
      fractalKoch(i-1,xx,yy,xp22-dx,yp22-dy);
      fractalKoch(i-1,xp22-dx,yp22-dy,xp22,yp22);
  }
  iteraciones++;
}

// genera un color dependiendo de la posici贸n en coordenadas x y
function getColor(x,y)
{
  var width = d.width;//ancho canvas
  var height = d.height;// alto canvas
  var stepW = width/255;
  var stepH = height/255;

  //jugando con las posibilidades:

  // tonalidades del rosa al amarillo
  //return 'rgb('+ (x+y*stepH) +', '+ (x*stepW) +', '+ (y*stepH) +')';

  // tonalidades del verde al amarillo
  //return 'rgb('+ (x*stepW) +', '+ (y*stepH) +',0)';

  // tonalidades del azul al rosa
  //return 'rgb('+ (x*stepW) +', 0,'+ (y*stepH) +')';

  // tonalidades del azul al turquesa
  return 'rgb(0,'+ (x*stepW) +','+ (y*stepH) +')';

  // tonalidades del turquesa al rosa
  //return 'rgb('+ (x*stepW) +', '+ (y*stepH) +','+ (x+y*stepW) +')';

  // tonalidades del rojo al amarillo
  //return 'rgb('+ (y*stepW) +', '+ (x*stepH) +',0)';

  // tonalidades del rojo al rosa
  //return 'rgb('+ (y*stepW) +', 0,'+ (x*stepH) +')';

  // tonalidades del verde al turquesa
  //return 'rgb(0,'+ (y*stepW) +','+ (x*stepH) +')';
}

Alguien sabe porque no puedo editar la anchura de la linea???

![](

馃槃

LA VIDA ES CODIGO!

Me dio curiosidad lo que dijo Fredy de solo se necesita una multiplicaci贸n para cambiar el lugar de la figura as铆 que investigu茅 un rato (al final no logre dar con ese metodo) y me tope con un blog muy interesante donde se utiliza otro m茅todo para dibujar la misma figura.

Despu茅s de estudiar el c贸digo del blog y aplicar lo que nos ense帽o Fredy, he llegado a este resultado (Espero que les sirva de referencia):

var box = document.getElementById("myCanvas");
var lienzo = box.getContext("2d");
var colorcito = "orange";
var inicioCanvas = 0;
var limiteCanvas = 600;
var limiteFigura = 300;
var plus, less, plusHalf, lessHalf;
for(var x = 1; x < limiteCanvas; x += 10)
{
	plus = inicioCanvas + x;
	less = limiteCanvas - x;
	dibujarLinea(1,colorcito,inicioCanvas, plus, plus, limiteCanvas);
	dibujarLinea(1,colorcito, plus, inicioCanvas, limiteCanvas, plus);
	dibujarLinea(1,colorcito,less, inicioCanvas, inicioCanvas, plus);
	dibujarLinea(1,colorcito,less, limiteCanvas, limiteCanvas, plus);
}

for(var x = 1; x < limiteFigura; x += 10)
{
	colorcito = "#ACF";
	plusHalf = limiteFigura + x;
	plus = inicioCanvas + x;
	lessHalf = limiteFigura - x;
	less = limiteCanvas - x;
	console.log("lessHalf " + lessHalf);
	dibujarLinea(1,colorcito,limiteFigura, less, plusHalf, limiteFigura);
	dibujarLinea(1,colorcito,limiteFigura, less, lessHalf, limiteFigura);
	dibujarLinea(1,colorcito,limiteFigura, plus, plusHalf, limiteFigura);
	dibujarLinea(1,colorcito,limiteFigura, plus, lessHalf, limiteFigura);
}
dibujarLinea(1,colorcito, inicioCanvas,limiteFigura,limiteCanvas,limiteFigura);
dibujarLinea(1,colorcito, limiteFigura,inicioCanvas,limiteFigura,limiteCanvas);

colorcito = "orange";
dibujarLinea(2,colorcito, 1, 1, 1, 599);
dibujarLinea(2,colorcito, 1, 1, 599, 1);
dibujarLinea(2,colorcito, 1, 599, 599, 599);
dibujarLinea(2,colorcito, 599, 1, 599, 599);

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

Intente hacerlo todo en la menor cantidad de lineas de codigo pero no tuve problemas con poner ambas figuras dentro del mismo ciclo for de todas formas estoy satisfecho con el resultado 馃槃 espero que le serva a alguien!

Un peque帽o agregado a mi c贸digo anterior.

Espero que tengan un buen d铆a.

Se puede acortar mucho m谩s el c贸digo, pero quer铆a que sea f谩cil de leer



Comparto mi dibujo libre =)

Asi quedo el desafio y la Torre que comenta Freddy al Inicio

var d = document.getElementById("dibujito");
var lienzo = d.getContext("2d");
var lineas = 30;
var l = 0;
var yi, xf, yf, xi;
var clavelito = "#721b65";

for (l=0; l < lineas; l++) 
{
    yi = 10 * l;
    xf = 10 * (l + 1);
    dibujarLinea(clavelito, 0, yi, xf, 300);
    yi = 600 - (l * 10);
    xf = 10 * (l + 1);
    dibujarLinea("#b80d57", 0, yi, xf, 300);
    yi = l * 10;
    xf = 600 -(l * 10);
    dibujarLinea("#f8615a", 600, yi, xf, 300);
    yi = 600 - (l * 10);
    yf = 10 * (l + 1);
    dibujarLinea("#b80d57", 600, yi, xf, 300);
    yi = 10 * l;
    xf = 600 + ( l * 10);
    dibujarLinea(clavelito, 600, yi, xf, 300);
    yi = 600 - (l * 10);
    xf = 600 + (l * 10);
    dibujarLinea("#f8615a", 600, yi, xf, 300);
    yi = 10 * l;
    xf =  1200 - (l * 10);
    dibujarLinea("#b80d57", 1200, yi, xf, 300);
    yi = 600 -(l * 10);   
    xf = 1200 -(l * 10); 
    dibujarLinea(clavelito, 1200, yi, xf, 300);

}

dibujarLinea(clavelito, 1, 1, 1,300)
dibujarLinea("#b80d57", 1, 300, 1, 600);
dibujarLinea("#b80d57", 1200, 0, 1200, 300);


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

hasta que por fin logr茅 hacer el dise帽o que quer铆a!!! Conocer el ciclo WHILE hace m谩s f谩cil entender el ciclo FOR, pero definitivamente en la pactica FOR 100%!
![](

<code>var d = document.getElementById("dibujito");
var lienzo = d.getContext("2d");
var lineas = 30;
var l = 0;
var yi, xf;
var colorcito = "#FAA";
var colorcito2 = "#CC68BA";

for(l = 0; l < lineas; l++)
{
  yi = 10 * l;
  xf = 10 * (l + 1);
  dibujarLinea(colorcito, 0, yi, xf, 300);
  dibujarLinea(colorcito, 300, yi + 10, xf - 10, 0);

  dibujarLinea(colorcito, 0, 300 - yi, xf, 0);
  dibujarLinea(colorcito, 300, 300 - 10 - yi, xf -10, 300);

  dibujarLinea(colorcito2, 150, yi * 0.5, xf * 0.5 + 150, 150);
  dibujarLinea(colorcito2, 150, yi * 0.5, 150 - xf * 0.5, 150);

  dibujarLinea(colorcito2, 150, 300 - yi * 0.5, 150 - xf * 0.5, 150);
  dibujarLinea(colorcito2, 150, 300 - yi * 0.5, 150 + xf * 0.5, 150);
  console.log("linea " + 1);
}

dibujarLinea(colorcito, 0, 0, 0, 300);
dibujarLinea(colorcito, 0, 0, 300, 0);
dibujarLinea(colorcito, 0, 300, 300, 300);
dibujarLinea(colorcito, 300, 0, 300, 300);

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

Este es mi c贸digo, al final de realizar la practica y tardarme m谩s de lo que pens茅, llegue a la conclusi贸n de que X siempre aumenta solo es jugar con la posici贸n en Y y disminuir o aumentar la cantidad

Nose como le hace la gente para hacer estas cosas sin volverse loco, yo lo hice asi, pero les prometo que me estaba explotando la cabeza

SUBIR IMAGENES
amigos para el que no sepa subir las imagenes
solo tienes que buscar la imagen donde la tengas guardada, en tu explorador de archivos y la arrastras hasta la caja de texto, osea donde escribes para preguntar. yo tambien lo estaba buscando hasta que lo encontre y lo quiero compartir porque como yo habemos muchos que apenas inician y no lo sabemos
Espero les sirva

As铆 qued贸 el dibujo:

Listo as铆 me quedo

<code>
```var d = document.getElementById("ciclos");
var lienzo = d.getContext("2d");
var lineas = 15;
var l = 0
var yi, xf;

function linea(color, x1, y1, x2, y2 )
{
  lienzo.beginPath();
  lienzo.strokeStyle=color;
  lienzo.moveTo(x1, y1);
  lienzo.lineTo(x2, y2);
  lienzo.stroke();
  lienzo.closePath();
}
linea("#18E5E4", 0, 0 ,0, 300);
linea("#18E5E4", 0, 0 ,300, 0);
linea("#18E5E4", 300, 0 ,300, 300);
linea("#18E5E4", 300, 300 ,0, 300);

while (l < lineas)
 {
  yi = l * 10;
  xf = 10 * (14 - l);
  linea("#A91A0F", 150, yi, xf, 150);
  console.log("linea" + 1);

  yi = 10 * (30 - l);
  xf = 10 * (16 + l);
  linea("#A91A0F", 150, yi, xf, 150);

  yi = l * 10;
  xf = 10 * (16 + l);
  linea("#A91A0F", 150, yi, xf, 150);

  yi = 10 * (30 - l);
  xf = 10 * (14 - l);
  linea("#A91A0F", 150, yi, xf, 150);

  yi = 10 * l;
  xf = 10 * (1 + l);
  linea("#18E5E4", 0, yi, xf, 150);

  yi = 10 * l;
  xf = 10 * l;
  linea("#18E5E4", 150, yi, xf, 0);

  yi = 10 * (15 - l);
  xf = 10 * (16 + l);
  linea("#18E5E4", 150, yi, xf, 0);

  yi = 10 * l;
  xf = 10 * (29 - l);
  linea("#18E5E4", 300, yi, xf, 150);

  yi = 10 * (30 - l);
  xf = 10 * (29 - l);
  linea("#18E5E4", 300, yi, xf, 150);

  yi = 10 * (15 + l);
  xf = 10 * (16 + l);
  linea("#18E5E4", 150, yi, xf, 300);

  yi = 10 * (15 + l);
  xf = 10 * (14 - l);
  linea("#18E5E4", 150, yi, xf, 300);

  yi = 10 * (30 - l);
  xf = 10 * (1 + l);
  linea("#18E5E4", 0, yi, xf, 150);
  l++
}

este es mi ejercicio

Bueno, despues de varios intentos logre esto, creo que se puede hacer en menos lineas pero lo hize asi para n confundirme entre cada for

Tarde cerca de 5 horas para dar con el c贸digo y hacer la estrella como quer铆a, si alguien puede mejorarlo y hacerlo mucho las simple, aqu铆 esta.

Un saludo a todos.

Ac谩 hay otra prueba

var d = document.getElementById(鈥榙ibujito鈥);
var lienzo = d.getContext(鈥2d鈥);
var lineas = 60;
var l = 0;
var yi,yf;
var xi,yf;
var color1 = "rgb(171, 9, 147)"
var color2 = "rgb(218, 72, 17)"
var color3 = "rgb(63, 224, 201)"
var color4 = "rgb(255, 0, 0)"
var color5 = "rgb(0, 255, 0)"
var color6 = 鈥渞gb(0, 0, 255)鈥

for (var l = 0; l < lineas; l++)
{
yi = 3l;
xf = 3
(1+l);
dibujarLinea(color1,0,yi3,xf3,400);
xi = 3l;
yf = 3
(1+l);
dibujarLinea(color2,xi3,0,400,yf3);
yi = l * 3;
xf = 200 + (l * 3);
dibujarLinea(color3,200,yi,xf,200);
dibujarLinea(color4,200,400-yi,xf,200);
dibujarLinea(color5,200,400-yi,200-yi,200);
dibujarLinea(color6,200,yi,200-yi,200);

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

var d = document.getElementById("dibujito");
var lienzo = d.getContext("2d");
var lineas = 30;
var l = 0;
var yi, xf, xi, yf;
var kolor = "purple"

for(l=0; l < lineas; l++)
{
	yi = 10 * l;
	xf = 10 * (l + 1);
	xi = 10 * l;
	yf = 10 * (l + 1);
	dibujarLinea(kolor, xi, 0, 300, yf);
	dibujarLinea(kolor, 0, yi, xf, 300);
	console.log("Linea " + l);
}

dibujarCorazon("purple",150,140);
dibujarCorazon("Teal",80,70);
dibujarCorazon("DeepPink",220,210);

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

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 dibujarCorazon(c,a,b)
{
	for(l=0; l < 40; l++)
	{
	if (l<20)
	{	
		xf=(l*0.5)+(a-10);
		yi=l+(b-20);
		yf=yi;
		xi=(a-20)-l;
		dibujarLinea(c,xi,yi,xf,yf);
		xf=a;
		yi=l+b;
		yf=yi;
		xi=(a-39)+l;
		dibujarLinea(c,xi,yi,xf,yf);
		yi=l+(b-20);
		yf=yi;
		xi=(a+10)-(l*0.5);
		xf=l+(a+20);
		dibujarLinea(c,xi,yi,xf,yf);
		yi=l+b;
		yf=yi;
		xi=a;
		xf=(a+40)-l;
		dibujarLinea(c,xi,yi,xf,yf);
	}
	else
	{
		xf=a;
		yi=l+b;
		yf=yi;
		xi=(a-39)+l;
		dibujarLinea(c,xi,yi,xf,yf);
		yi=l+b;
		yf=yi;
		xi=a;
		xf=(a+40)-l;
		dibujarLinea(c,xi,yi,xf,yf);
	}	

	}
}

As铆 lo hice, s贸lo inclu铆 una l铆nea de c贸digo y para hacerlo de dos colores diferentes 3 l铆neas de c贸digo adicionales 馃槈

Aplicando el ejercicio a otros elementos como color (hue):

Como no recordar estas cosas en el papel



result贸 esto:

DIBUJANDO EN CANVAS (40 LINEAS)

El reto:

Genial

![](

Aqui puedes puedes elegir el numero de lineas que quieras, espero que se diviertan,

![](``

<var d = document.getElementById("dibujito");
var lienzo = d.getContext("2d");
var Lineas = 26;
var J = prompt('/"Puedes elegir el n煤mero de lineas no mayor de 25/"');
var P = parseInt(J);

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

//esq. superio der.//

for(L=0;L<Lineas;L=L+P)
{
    var X2i = 250-(L*10);
    var Y2f = L*10;

    hacerUnDibujo("#307BF2", X2i, 0, 0, Y2f);
}

//esq. inferior izq.//
for(L=0;L<Lineas;L=L+P)
{
    var Yi = 250+(L*10);
    var Xf = L*10;
   
    hacerUnDibujo('#307BF2', 0, Yi, Xf, 500);
}

//esq. inferior der.//
for(L=0;L<Lineas;L=L+P)
{
    var Y4i = 250+(L*10);
    var X4f = 500-(L*10);

    hacerUnDibujo("#307BF2", 500, Y4i, X4f, 500);
}

//esq. superior der.//
for(let L=0; L<Lineas; L=L+P)
{
    var X3i = 250 + (L*10);
    var Y3f = L*10;

    hacerUnDibujo("#307BF2", X3i, 0, 500, Y3f);
}

//Center//
for(let L=0; L<Lineas; L=L+P)
{
    var Y5i = 10*L;
    var X5f = 240-(10*L);

    hacerUnDibujo('#E8B910', 250, Y5i, X5f, 250);
}

for(let L=0; L<Lineas; L=L+P)
{
    var Y6i = 10*L;
    var X6f = 250+(10*L);

    hacerUnDibujo("#E8B910", 250, Y6i, X6f, 250)
}

for(let L=0; L<Lineas; L=L+P)
{
    var Y7i = 500-(10*L);
    var X7f = 250-(10*L);

    hacerUnDibujo('#E8B910', 250, Y7i,X7f, 250);
}

for(let L=0; L<Lineas; L=L+P)
{
    var Y8i = 500-(10*L);
    var X8f = 250 + (10*L);

    hacerUnDibujo("#E8B910", 250, Y8i, X8f, 250);
}

// new variables for de diamond//
//start//
var colour="orange";
var diamantes = 5;

for(c=0;c<diamantes;c++)
{
    Z_diamantes = 20 + c;
    W_diamantes = 480 + c;

    hacerUnDibujo(colour, 250, Z_diamantes, Z_diamantes, 250);
    hacerUnDibujo(colour, Z_diamantes, 250, 250, W_diamantes);
    hacerUnDibujo(colour, 250, W_diamantes, W_diamantes, 250 );
    hacerUnDibujo(colour, W_diamantes, 250, 250, Z_diamantes);
}
//end//

var col="#E8B910"
hacerUnDibujo(col, 0, 0, 0, 499);
hacerUnDibujo(col, 0, 499, 499, 499);
hacerUnDibujo(col, 499, 499, 499, 0 );
hacerUnDibujo(col, 499, 0, 0, 0);>
<  var d = document.getElementById("dibujito"); //getElementById es un m茅todo del documento
  var lienzo = d.getContext("2d"); //es un m茅todo del canvas
  var lineas = 30; //l铆mite de l铆neas
  var l = 0;
  var xi, yf;
  var xf, yi;
  var colorcito = "#AFA";

  for(l = 0; l < lineas; l++)
  {
    yi = 300 - (l * 10);
    xf = 10 * (l + 1);
    dibujarLinea("blue", 0, yi, xf, 0);
    xi = 300 + (l * 10);
    yf = 10 * (l + 1);
    dibujarLinea("#bb29bb", xi, 0, 600, yf);
    yi = 300 + (l * 10);
    xf = 10 * (l + 1);
    dibujarLinea("#bb29bb", 0, yi, xf, 600);
    xi = 300 + (l * 10);
    yf = 600 - (10 * (l + 1));
    dibujarLinea("blue", xi, 600, 600, yf);
    xi = l * 10;
    yf = 300 - (10 +(l * 10));
    dibujarLinea("#40E0D0", xi, 300, 300, yf);
    yi = l * 10;
    xf = 300 + (10 +(l * 10));
    dibujarLinea("#AFA", 300, yi, xf, 300);
    xi = l * 10;
    yf = 300 + (10 +(l * 10));
    dibujarLinea("#AFA", xi, 300, 300, yf);
    yi = 600 - (l * 10);
    xf = 300 + (10 +(l * 10));
    dibujarLinea("#40E0D0", 300, yi, xf, 300);
  }
  dibujarLinea("blue", 1, 1, 299, 1);
  dibujarLinea("blue", 1, 1, 1, 299);
  dibujarLinea("purple", 299, 1, 599, 1);
  dibujarLinea("purple", 599, 1, 599, 299);
  dibujarLinea("blue", 299, 599, 599, 599);
  dibujarLinea("blue", 599, 299, 599, 599);
  dibujarLinea("purple", 1, 299, 1, 599);
  dibujarLinea("purple", 1, 599, 299, 599);
  dibujarLinea("#40E0D0", 299, 1, 299, 599);
  dibujarLinea("#40E0D0", 1, 299, 599, 299);
  function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal)
  {
  lienzo.beginPath(); //lienzo es el contexto 2d, la funci贸n beginPath indica que arranca un dibujo
  lienzo.strokeStyle = color; //objeto lienzo, atribuo strokeStyle
  lienzo.moveTo(xinicial, yinicial); //metodo de canvas para mover la l铆nea
  lienzo.lineTo(xfinal, yfinal); //creamos una linea
  lienzo.stroke(); //cerramos la linea
  lienzo.closePath(); //la funci贸n closePath terminamos de dibujar y levantamos l谩piz
  }
>

)

As铆 quedo el m铆o.

Mi codigo:

var d = document.getElementById("dibujito");
var lienzo = d.getContext("2d");
var lineas = 30;
var xi,yi,xf,yf;
var colorcito = "black"

function dibujarLinea(color,xInicial,yInicial,xFinal,yFinal)
 {
    lienzo.beginPath();  //funcion --> arranca el dibujo
    lienzo.strokeStyle = color; //atributo o propierdad del objeto lienzo y se asigna el color rojo
    lienzo.moveTo(xInicial,yInicial); // muevo la posisici贸n
    lienzo.lineTo(xFinal,yFinal); // cierra en la posicion
    lienzo.stroke();
    lienzo.closePath();  //funcion  ---> termina el dibujo
 }

for (var l = 0; l < lineas; l++)
{
  yi=10*l;
  xf=300-10*(l+1);
  dibujarLinea(colorcito, 300, yi, xf, 300);

  yi=10*l;
  xf=10*(l+1);
  dibujarLinea(colorcito, 0, yi, xf, 300);

  yi=300-10*l;
  xf=10*l;
  dibujarLinea(colorcito, 0, yi, xf, 0);

  xi=300-10*(l+1);
  yf=300-10*l;
  dibujarLinea(colorcito, xi, 0, 300, yf);

  yi=5*l;
  xf=150-5*(l+1);
  dibujarLinea(colorcito, 150, yi, xf, 150);

  xf=5*l;
  yi=150+5*(l+1)
  dibujarLinea(colorcito, 150, xf, yi, 150);

  xi=150+5*(l+1);
  yf=300-5*l;
  dibujarLinea(colorcito, xi, 150, 150, yf);

  xi=150-5*(l+1);
  yf=300-5*l;
  dibujarLinea(colorcito, xi, 150, 150, yf);
  console.log("Linea " + l);
}

dibujarLinea(colorcito,1,1,1,299);
dibujarLinea(colorcito,1,299,299,299);
dibujarLinea(colorcito,299,0,299,299);
dibujarLinea(colorcito,0,0,299,0);
dibujarLinea(colorcito,150,0,150,300);
dibujarLinea(colorcito,0,150,300,150);

Mi dibujo emulando el ejemplo de un compa帽ero.

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

function dibujarLinea (color, xinicial, yinicial, xfinal, yfinal)
{
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.moveTo(xinicial, yinicial);
  lienzo.lineTo(xfinal, yfinal);
  lienzo.stroke();
  lienzo.closePath();
}
for (i= 0; i < k; i++)
 {
  dibujarLinea("blue", i, i-i,k,  i+1);
  dibujarLinea("red", i-i, k-i,i+1, i-i);
  dibujarLinea("green", k, i,(k-1)-i, k);
  dibujarLinea("yellow", k-i, k, i-i, (k-1)-i);
  i = i + 10;
}

espero les guste, saludos!

Y si agregamos como valor de coordenada final la posici贸n del puntero!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

  <canvas id="canvas" width="1000px" height="500px"></canvas>

  <script type="text/javascript">
    
    let d = document.getElementById('canvas');
    let lienzo = d.getContext("2d");
    var x, y;
    let lineas = 100;
    let l = 0;
    let yi, xf;

    window.onmousemove = function (){
        var x = window.event.clientX;
        var y = window.event.clientY;
        dibujarLineas( "red", 0, x, 0, y);
    }

    dibujarLineas( "blue", 0, 1000, 0, 0);
    dibujarLineas( "blue", 0, 0, 0, 500);
    dibujarLineas( "blue", 0, 1000, 500, 500);
    dibujarLineas( "blue", 1000, 1000, 0, 500);

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


  </script>

</body>
</html>

Estuve un poco enredada, pero por fin, as铆 me qued贸 mi dibujito!

Por un momento me confundi, pero al analizarlo descubri que es mas sencillo de lo que parece. Use una tabla de excel para calcular las variables.

var d = document.getElementById("dibujito");
var lienzo = d.getContext("2d");
var lineas = 30;
var l = 0;
var xi, yi, xf, yf;
var xi2, yi2, xf2, yf2;
var color1,color2,color3,color4,color5
color1="#F4D03F" //amarillo
color2="#D35400" //naranja
color3="#17202A" //azul
color4="#A569BD" //morado
color5="#A93226" //rojo

//FUNCIONES
//------------------Dibujar Lineas
function dLine(color, grosor, x1, y1, x2, y2){
  lienzo.beginPath();
  lienzo.strokeStyle = color
  lienzo.lineWidth = grosor
  lienzo.moveTo(x1,y1);
  lienzo.lineTo(x2,y2);
  lienzo.stroke();
  lienzo.closePath()
}

for(l = 0; l < lineas; l++)
{
xi = 10 * l
yi = 10 * l
yf = 10 * (l + 1)
xf = 10 * (l + 1)
xi2 = 10 * l
yi2 = 10 * (l + 1)
yf2 = 10 * (30 - l)
xf2 = 10 * (29 - l)
dLine(color1, "1", 0, yi, xf, 300);
dLine(color2, "1", xi, 0, 300, yf);
dLine(color4, "1", 0, yi2, xf2, 0);
dLine(color5, "1", xi2, 300, 300, yf2);
console.log("Linea " + l)
}

dLine(color3,"3",0,0,300,0)
dLine(color3,"3",300,0,300,300)
dLine(color3,"3",0,0,0,300)
dLine(color3,"3",0,300,300,300)

jsjsjsjsjsjs me gusto ese dibujo, bien facil de hacer xd

As铆 se ve mi dibujo

Les dejo mi ejemplo a ver que les parece! optimic茅 el c贸digo (seg煤n yo) para reducir l铆neas de c贸digo, ademas de que utilizo los tres tipos de ciclos (for, while, do while)

<var d = document.getElementById("dibujito");
var lienzo = d.getContext("2d");
var l;
var lineas=30;
var yi;
var xf;
console.log(lienzo);
function trazar_linea(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();
}

for(l=0; l<=lineas; l++)
{
  yi= 5 * l;
  xf= 5 * (l +1);

  trazar_linea("red", 0, (yi + 150), (xf), 300);
  trazar_linea("red", (yi + 150), 300, 300, (300 - xf));
  trazar_linea("red", 300, (150 - yi), (300 - xf), 0);
  trazar_linea("red", (150 - yi), 0, 0, (xf));
  trazar_linea("red", 150, (yi), (150 - xf), 150);
  trazar_linea("red", (yi), 150, 150, (150 + xf));
  trazar_linea("red", 150, (300 - yi), (150 + xf), 150);
  trazar_linea("red", (300 - yi), 150, 150, (150 - xf));
  trazar_linea("red", 150, (yi), (150 - xf), 150);
  trazar_linea("red", (yi), 150, 150, (150 + xf));
  trazar_linea("red", 150, (300 - yi), (150 + xf), 150);
  trazar_linea("blue", (150 - yi), 150, 0, (150 + xf));
  trazar_linea("blue", (yi), 300, 150, (300 - xf));
  trazar_linea("blue", 150, (yi + 150), (150 + xf), 300);
  trazar_linea("blue", (150 + yi), 150, 300, (150 + xf));
  trazar_linea("blue", (150 + yi), 150, 300, (150 - xf));
  trazar_linea("blue", (150 - yi), 150, 0, (150 + xf));
  trazar_linea("blue", 150, (150-yi), (150+xf), 0);
  trazar_linea("blue", 150, (150 - yi), (150 + xf), 0);
  trazar_linea("blue", (0+yi), 0, 150, (0+xf));
  trazar_linea("blue", 0, (0+yi), (0+xf), 150);
}

trazar_linea("black", 1, 0, 1,300);
trazar_linea("black", 0, 299, 300, 299);
trazar_linea("black", 299, 300, 299, 0);
trazar_linea("black", 0, 1, 300, 1);
>
for (l = 0 ; l < lineas ; l++)
  {
      yi=10*l;
      xf=10*(l+1);
      dibujarLinea("grey", 0,yi,xf,300);
      console.log("linea" +1);
      dibujarLinea("grey", yi,0,300,xf);
  }
for (l = 0 ; l < lineas ; l=l+1)
    {
        yi=10*l;
        xf=10*(30-l);
        dibujarLinea("grey", yi,0,0,xf);
        dibujarLinea("grey", yi,300,300,xf);
    }
    for (l = 0 ; l < lineas ; l++)
      {
          yi=10*l;
          xf=10*(l+30);
          dibujarLinea("grey", 0,yi,xf,300);
          console.log("linea" +1);
          dibujarLinea("grey", yi,0,300,xf);
      }```

![](

as铆 me quedo por lo menos me quedo bien

Que divertido estuvo esto!!!

Yo lo hice de esta manera

Hola compa帽eros este es mi dibujo Canvas,

y este es el c贸digo !!

Mi consejo a todos es que llegado este punto, repitan los videos anteriores hasta que cada concepto les quede muy claro. Tambi茅n recomiendo no quedarse solo con el reto de Fredy, si no ir mucho m谩s all谩 馃槃

<var d_0 = document.getElementById("dibujito"), d_1 = document.getElementById("dibujito_1"), d_2 = document.getElementById("dibujito_2"), d_3 = document.getElementById("dibujito_3");
var lienzo_0 = d_0.getContext("2d"), lienzo_1 = d_1.getContext("2d"), lienzo_2 = d_2.getContext("2d"), lienzo_3 = d_3.getContext("2d");
var l = 0;
var xi, xf, yi, yf, x_n, y_n;
var lineas = 30;
var tamano = 300;
var color_0 = "#000", color_1 = "#FF4000", color_2 = "#58ACFA", color_3 = "#BF00FF", color_4 = "#01DF01", color_5 = "#FFFF00", color_6 = "#01DF01", color_7 = "Red", color_8 = "blue", color_9 = "Green";

/** Primer Imagen */
for (l = 0; l < lineas; l++) {
  yf = 10 * l;
  yi = 10 * l;
  xi = 10 * (l + 1);
  xf = 10 * (l + 1);
  dibujarLinea_0(color_5, xi, 0, tamano, yf);
  dibujarLinea_0(color_5, 0, yi, xf, tamano);
}
for (l = 0; l < lineas; l++) {
  xi = 10 * l;
  yi = 10 * (l + 1);
  x_n = tamano - yi
  y_n = tamano - yi
  dibujarLinea_0(color_1, 0, yi, x_n, 0);
  dibujarLinea_0(color_1, xi, tamano, tamano, y_n);
}

/** Segunda Imagen */
for (l = 0; l < lineas; l++) {
  yf = 10 * l;
  xi = 10 * (l + 1);
  dibujarLinea_1(color_2, xi, 0, 0, yf);
  dibujarLinea_1(color_2, 0, xi, yf, 0);
  dibujarLinea_1(color_2, xi, tamano, tamano, yf);
  dibujarLinea_1(color_2, tamano, xi, yf, tamano);
}

/** Tercera Imagen */
for (l = 0; l < lineas; l++) {
  xi = 10 * (l + 1);
  yi = 10 * (l + 1);
  xf = 10 * (l + 1);
  yf = 10 * (l + 1);
  dibujarLinea_2(color_2, xi, 0, 0, tamano);
  dibujarLinea_2(color_2, 0, yi, tamano, 0);
  dibujarLinea_2(color_2, tamano, 0, xf, tamano);
  dibujarLinea_2(color_2, tamano, yi, 0, tamano);
  dibujarLinea_2(color_3, tamano, tamano, 0, yf);
  dibujarLinea_2(color_3, 0, 0, xf, tamano);
  dibujarLinea_2(color_3, 0, 0, tamano, yf);
  dibujarLinea_2(color_3, tamano, tamano, xf, 0);
}

/** Cuarta Imagen */
for (l = 0; l < lineas; l++) {
  xi = 10 * l;
  yf = 10 * (l + 1);
  y_n = tamano - yf
  dibujarLinea_3(color_3, xi, yf, tamano, y_n);
  dibujarLinea_3(color_3, y_n, 0, yf, xi);
  dibujarLinea_3(color_3, xi, yf, 0, y_n);
  dibujarLinea_3(color_3, y_n, tamano, yf, xi);
}

dibujarLinea(color_0, 1, 1, 1, 299);
dibujarLinea(color_0, 1, 299, 299, 299);
dibujarLinea(color_0, 1, 1, 299, 1);
dibujarLinea(color_0, 299, 1, 299, 299);

/** Dibuja el Primer Lienzo */
function dibujarLinea_0(color, xinicial, yinicial, xfinal, yfinal) {
  lienzo_0.beginPath();
  lienzo_0.strokeStyle = color;
  lienzo_0.moveTo(xinicial, yinicial);
  lienzo_0.lineTo(xfinal, yfinal);
  lienzo_0.stroke();
  lienzo_0.closePath();
}
/** Dibuja el Segundo Lienzo */
function dibujarLinea_1(color, xinicial, yinicial, xfinal, yfinal) {
  lienzo_1.beginPath();
  lienzo_1.strokeStyle = color;
  lienzo_1.moveTo(xinicial, yinicial);
  lienzo_1.lineTo(xfinal, yfinal);
  lienzo_1.stroke();
  lienzo_1.closePath();
}
/** Dibuja el Tercer Lienzo */
function dibujarLinea_2(color, xinicial, yinicial, xfinal, yfinal) {
  lienzo_2.beginPath();
  lienzo_2.strokeStyle = color;
  lienzo_2.moveTo(xinicial, yinicial);
  lienzo_2.lineTo(xfinal, yfinal);
  lienzo_2.stroke();
  lienzo_2.closePath();
}
/** Dibuja el Cuarto Lienzo */
function dibujarLinea_3(color, xinicial, yinicial, xfinal, yfinal) {
  lienzo_3.beginPath();
  lienzo_3.strokeStyle = color;
  lienzo_3.moveTo(xinicial, yinicial);
  lienzo_3.lineTo(xfinal, yfinal);
  lienzo_3.stroke();
  lienzo_3.closePath();
}> 
<code>
var d = document.getElementById("dibujito");
var lienzo = d.getContext("2d");
var lineas = 30;
var l = 0;
var a, b, c, d;
var colorcito = "pink";

for(l=0; l < lineas ; l++)
 {
  a = l * 10;
  b = 10 * (l + 1);
  c = 300 - a;
  d = 290 - a;
  dibujarLinea(colorcito, 0, a, b, 300);
  dibujarLinea(colorcito, a, 300, 300, c);
  dibujarLinea(colorcito, 300, c, d, 0);
  dibujarLinea(colorcito, c, 0, 0, b);
  console.log("Linea" + l);
 }

dibujarLinea("pink", 1,1,1,299);
dibujarLinea("pink", 1,299,299,299);
dibujarLinea("pink", 299,299,299,1);
dibujarLinea("pink", 299,1,1,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();
}

Hola, s铆 me qued贸 mi dibujo, fue muy divertido el ejercicio.

Aqu铆 va parte del C贸digo:

Gracias Platzy, quedo atenta a sugerencias y/o comentarios.

Buenas, A mi me quedo as铆:
![](
Y aqu铆 esta el c贸digo:

<var d = document.getElementById("dibujote");
var lienzo = d.getContext("2d");
var lineas = 30;
var lineasd = 15;
var l = 0;
var xi;
var yi;
var xf;
var yf;

for( l=0; l < lineas; l++)
{
  var xi = 10 * l;
  var yi = 10 * l;
  var xf = 10 * (l + 1);
  var yf = 10 * (l + 1);
  dibujarLinea("red", 0, yi, xf, 300);
  dibujarLinea("red", xi, 0, 300, yf);
  console.log("Linea" + l);
}
for( l=0; l < lineasd; l++)
{
  var xi = 10 * l;
  var yi = 10 * l;
  var yf= 160 + yi;
  var xf= 160 + xi;
  var dyi= 300 - yi;
  var dxi= 300 - xi;
  var dxf1=140 - xi;
  var dyf1=140 - yi;
  dibujarLinea("#FFCC00", dxi, yi, xf, yf);
  dibujarLinea("#FFCC00", dxi, yi, dxf1, dyf1);
  dibujarLinea("#FFCC00", xi, dyi, dxf1, dyf1);
  dibujarLinea("#FFCC00", xi, dyi, xf, yf);
}

dibujarLinea("orange", 1, 1, 1, 299)
dibujarLinea("orange", 1, 299, 299, 299)
dibujarLinea("orange", 1, 1, 299, 1)
dibujarLinea("orange", 299, 1, 299, 299)

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

Intento de sharingan. xD

Aqu铆 les dejo el dibujo que logr茅 crear usando ciclos en JS.

El arte:

El artista:

var d = document.getElementById("dibujito");
var lienzo = d.getContext("2d");
var lineas = 50;
var liniecitas = 25;
var l = 0;
var l2 = 0;
var yi, xf;

for (l = 0; l < lineas; l++)
{
  yi = 10 * l;
  xf = 10 * (l + 1);
  xi2 = 10 * l;
  yf2 = 10 * (l + 1);
  xi3 = 500 - (10 * l);
  yf3 = 10 * l;
  xi4 = 10 * l;
  yf4 = 490 - (10 * l);
  dibujarLinea ("#0ff229", 0, yi, xf, 500);
  dibujarLinea ("#0ff229", xi2, 0, 500, yf2);
  dibujarLinea ("#0febf2", xi3, 0, 0, yf3);
  dibujarLinea ("#0febf2", xi4, 500, 500, yf4);
}

for (l2 = 0; l2 < liniecitas; l2++)
{
  yi5 = 10 * l2;
  xf5 = 260 + (l2 * 10);
  yi6 = 500 - (10 * l2);
  xf6 = 260 + (l2 * 10);
  yi7 = 10 * l2;
  xf7 = 240 - (l2 * 10)
  yi8 =
  xf8 =
  dibujarLinea ("blue", 250, yi5, xf5, 250);
  dibujarLinea ("blue", 250, yi6, xf6, 250);
  dibujarLinea ("blue", 250, yi7, xf7, 250);
  dibujarLinea ("blue", 250, yi6, xf7, 250);
}

dibujarLinea ("#0ff229", 1, 1, 1, 499);
dibujarLinea ("#0ff229", 1, 499, 499, 499);
dibujarLinea ("0febf2", 499, 499, 499, 1);
dibujarLinea ("0febf2", 499, 1, 1, 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();
}


Ehm, yo hice esto haciendo cada dibujo de la mitad del cuadro del canvas. Us茅 un canvas de 500*500. Espero se entienda :^)

while (l < lineas)
{
  if (c == 1)
  {
    col = "blue";
  }
  else if (c == 2)
  {
    col = "red";
  }
  else if (c == 3)
  {
    col = "yellow";
  }
  else if (c == 4)
  {
    col = "green";
  }
  else if (c == 5)
  {
    col = "pink";
  }
  else
  {
    col = "orange";
  }
  dibujar(col, 0, l, l, 300)
  dibujar(col, 300, l, 300-l, 300)
  dibujar(col, l, 0, 300, l)
  dibujar(col, 300-l, 0, 0, l)
  dibujar(col, 0, l, 300, 300-l)
  dibujar(col, 300-l, 0, l, 300)
  l = l + 5;
  c = c + 1;
  if (c == 7)
  {
  c = 1;
  }
}```

En la Universidad me han ense帽ado que la diferencia m谩s importante en el uso de los ciclos for y while consiste en el conocimiento del n煤mero de ciclos por realizarse. Con el ciclo for, el programador conoce de antemano el l铆mite de los ciclos; mientras que para el ciclo while, el programador desconoce el n煤mero de ciclos, ya que estos dependen del cumplimiento de una condici贸n. Es por ello que en muchos casos, como este, podemos usar ambos ciclos de forma indistinta.

Freddy, tienes anotados los c贸digo de los colores en el techo? XD

![]