Ciclos while y for en JavaScript

Dibuje la portada del álbum “The 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(‘dibujito’);
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 = “rgb(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

![]