Platzi
Platzi

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

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

Debes tener cuenta en Platzi

Para ver esta clase abierta debes iniciar sesión

Ciclos while y for en JavaScript15/36

Otro concepto fundamental en programación son los ciclos,

 

Los ciclos son piezas de código que se repiten hasta que se cumple una condición


 

Recuerda:

 

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

Aquí como me quedo agregando las otras dos esquinas 


 

Este es mi Ejercicio de Ciclos en JavaScript, espero haberlo hecho bien! xD

ejercicio Platzi.png

🐱‍💻 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();
}
Reto.png
Captura de pantalla 2017-07-04 a la(s) 9.24.05 a.m..png
var d = document.getElementById('dibujito');
var lienzo = d.getContext("2d");
var lineas = 30
var l = 0;
var yi, xf;

for (l ; l< lineas; l++) 
 	
{
	yi= 10 * l
	xf = 10 * (l + 1)
	dibujarLinea ("#DADADA", 150, 0, xf, 150)
	dibujarLinea ("#DADADA", 150, 300, xf, 150)
	dibujarLinea ("#DADADA", 150, 300, xf, 150)
	dibujarLinea ("#DADADA", 0, 150, 150, yi)
	dibujarLinea ("#DADADA", 300, 150, 150, yi)

	console.log ("linea" + l)
}

function dibujarLinea (color,xinicia,yinicial,xfinal,yfinal)

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

que mejor que aprender haciendo cosas que te gustan!!sharingan.png

dibujo3.png
Ojo.png
Codigo_ojo.png
var d = document.getElementById("dibujito");
var lienzo = d.getContext("2d");
var lineas = 30;
var l = 0;
var yf, xi;
var yi, xf;
var xf2;
var colorsito = "skyblue";

for(l = 0; l < lineas; l++)
{
  yf = yi = 10 * l;
  xi = xf = 10 * (l + 1);
  xf2 = xi2 = 290 - (l * 10);
  dibujarLinea(colorsito, xi, 0, 300, yf);
  dibujarLinea(colorsito, 0, yi, xf, 300);
  dibujarLinea(colorsito, 300, yi, xf2, 300);
  dibujarLinea(colorsito, xi2, 0, 0, yf);
  console.log("linea" + l);
}

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

Así quedó!
Canvas.jpg

Dibuje la portada del álbum “The Dark Side Of The Moon” (Pink Floyd) utilizando lo aprendido.

MI DIBUJO.png

¡Espero les guste! 😃

¿Por qué el mío no se ve igual?
homer.PNG
torre.PNG

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

(hexagono.PNG

Diagrama invertido con colores aleatorios 😄

Screenshot_20170712_092539.png
//alert("Sí funciona");

var d = document.getElementById("dibujito"); // Obtener valor desde el html
var lienzo = d.getContext("2d"); // Parte del lienzo
var l = 0;
var l2 = 0;
var lineas=50;
var yi,xf;

//dibujarLinea("red", 0,0,10,300);
console.log(lienzo);

while(l<lineas){
	yi = 10 * l;
	xf = 10 * (l+1);
	dibujarLinea(obtenerColorAleatorio(), 0, yi, xf,500);
	dibujarLinea(obtenerColorAleatorio(), 500, yi, xf,0);
	//dibujarLinea(color3, 500, yi, xf,0);
	console.log("Linea es: "+l);
	l++;
}
// Borde inferior izquierdoobtenerColorAleatorio()
dibujarLinea(obtenerColorAleatorio(), 1,1,1,499);
dibujarLinea(obtenerColorAleatorio(), 1,499,499,499);

// Borde superior derecho
dibujarLinea(obtenerColorAleatorio(), 499,499,499,1);
dibujarLinea(obtenerColorAleatorio(), 499,1,1,1);

function dibujarLinea (color, xinicial, yinicial, xfinal, yfinal){
	lienzo.beginPath(); // Iniciar trazado
	lienzo.strokeStyle = color; // Propiedad => Color de la línea
	lienzo.moveTo(xinicial,yinicial); // Inicio del punto de trazado
	lienzo.lineTo(xfinal,yfinal); // Final del punto de trazado
	lienzo.stroke(); // Dibuja la línea
	lienzo.closePath(); // Cerrar el trazo, levantar el lápiz
}

function numeroAletario(inferior, superior){
	numPosibilidades = superior-inferior;
	numero = Math.floor(Math.random()*numPosibilidades);
	return parseInt(inferior) + numero;
}

function obtenerColorAleatorio(){
	hexadecimalArray = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
	colorAleatorio="#"; // Inicia el primer valor del color hexadecimal

	// Generar un color aletario para cada línea
	for (i=0;i<6;i++){
		numero = numeroAletario(0, hexadecimalArray.length); // define un número aleatorio entre 0 el tamaño del array de los colores hexadecimales
		colorAleatorio += hexadecimalArray[numero]; // Concatena el string del color
	}
	return colorAleatorio;
}

**Aporte 😃 **
Captura33.PNG

En el video Freddy hablaba sobre el ambito de las variables, investigue un poco al respecto y lo que encontre es que básicamente, cuando se declaran variables fuera de cualquier bloque de código, o fuera de las llavez que delimitan los mismos, esta es una variable global y se puede acceder a ella desde cualquier lugar del archivo, pero cuando por el contrario las declaramos en un bloque de código como una función o un ciclo, esta es una variable local y esta solo afecta el código en ese bloque. Por lo tanto se pueden tener 2 variables con el mismo nombre siempre y cuando una sea global y la otra local, aunque esta no es una práctica muy recomendable.

En este enlace hay mas información sobre esto, además de ejemplos prácticos: https://desarrolloweb.com/articulos/517.php

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

Screen Shot 2018-11-02 at 20.24.12.png

La verdad yo aproveche para dedicarle un mensaje a mi novia, así sino gano puntos en el curso al menos gano puntos con ella (eso espero…) while.png

Mi intento xd canvas.jpg

listo

Captura.PNG

ejercicio_platzi.JPG
mi ejercicio con algunas adicciones =)

Mi pequeño dibujo.
Captura de Pantalla 2019-07-15 a la(s) 5.01.28 p. m..png

Solo cambié el orden, y mi dibujo quedó invertido, pero no sé si eso era lo que tenia que hacer. 


function dibujarLinea(color, yfinal, xfinal, yinicial, xinicial)
Captura de Pantalla 2019-09-26 a la(s) 4.22.20 p. m..jpg

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 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.
.
Captura.JPG

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

Mi aporte

Captura de pantalla de 2017-11-11 01-42-29.jpg

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

for( i = 0; i <= 30; i++){
//Lineas de la parte inferior derecha
var l_xi = 0;
var l_yi = i * 10;
var l_xf = i * 10 + 10;
var l_yf = 300;
dibujarLinea("#830000", l_xi, l_yi, l_xf, l_yf);
//Lineas de la parte superior izquierda
dibujarLinea("#830000", l_xf, l_xi, l_yf, l_yi);
//Lineas de la parte inferior derecha
var l_xi = i * 10;
var l_xf = 300;
var l_yf = 300 - (i * 10 + 10);
var l_yi = 300;
dibujarLinea("#830000", l_xi, l_yi, l_xf, l_yf);
//Lineas de la parte superior izquierda
dibujarLinea("#830000", 0, l_yf, l_xi, 0);
}

for (z = 7; z <= 23; z++){
var l_xi = 150;
var l_yi = 40;
var l_xf = z * 10;
var l_yf = 150;
//Parte superior rombo
dibujarLinea("#830000", l_xi, l_yi, l_xf, l_yf);
//Parte inferior rombo
dibujarLinea("#830000", l_xi, 260, l_xf, l_yf);
//Parte izquierda rombo
dibujarLinea("#830000", l_yi, l_xi, l_yf, l_xf);
//Parte derecha rombo
dibujarLinea("#830000", 260, l_xi, l_yf, l_xf);
}

for (z = 1; z <= 14; z++){
var l_xi = 80;
var l_yi = 80;
var l_xf = (z + 7) * 10;
var l_yf = 220 - (z * 10);
//superior izquierda cuadro
dibujarLinea("#830000", l_xi, l_yi, l_xf, l_yf);
//inferior derecha cuadro
dibujarLinea("#830000", 210, 210, l_xf, l_yf);
//inferior izquierda cuadro
dibujarLinea("#830000", l_xi, 210, l_xf, l_xf);
//Psuperior derecha cuadro
dibujarLinea("#830000", 210, l_yi, l_xf, l_xf);
}

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

Hice una estrella 😛
estrellita.jpg
codigoestrellita.jpg

var d = document.getElementById("dibujito"); //Se almacena el canvas
var lienzo = d.getContext("2d") ; // Método del Objeto Canvas
var lineas = 30; //Establece el número de ciclo
var l = 0; // Es la variable que cuenta las líneas
var yi, xf; // variable para colocar el valor creciente del ciclo
var colorcito = "purple";

// Crear Ciclo

for(l = 0; l < lineas; l++)
{
  yi= 10 * l; //se le da valor a la variable creciente mediante ecuación matemática
  xf= 10 * (l + 1); // se le da valor a la variable creciente mediante ecuación matemática
  dibujarLinea(colorcito, 0, yi, xf, 300) //se sustituyen valores por variales de valor creciente
  dibujarBorde()
}

//Javascript primero lee el código, encuentra funciones, y después lo que está después de la función

function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal)
{
  lienzo.beginPath(); // Empieza Trazo
  lienzo.strokeStyle = color; // Dibuja Línea
  lienzo.moveTo(xinicial, yinicial); // Inicio de la Línea
  lienzo.lineTo(xfinal, yfinal); // Final de la Línea
  lienzo.stroke(); // Tipo de Línea
  lienzo.closePath(); // Levanta el punto
}
function dibujarBorde()
{
  dibujarLinea(colorcito, 0, 0, 0, 300);
  dibujarLinea(colorcito, 0, 300, 300, 300);
  dibujarLinea(colorcito, 0, 0, 300, 0);
  dibujarLinea(colorcito, 300, 0, 300, 300);
}
recorte.JPG

No me quedé con las ganas e hice los cuatro lados utilizando FOR. Quedó bastante colorido...


<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>Dibujando con canvas</title>

  </head>

  <body>

    <h1>Dibujo en Canvas</h1>

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

    <p>Mi Propio Desafío</p>

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

  </body>

</html>


var d = document.getElementById("dibujito");

var lienzo = d.getContext("2d");

var lineas = 30;

var l = 0;


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

{

  dibujarLinea("yellow", (10 * l), 0, 300, (10 * (l + 1)));

  dibujarLinea("green", 0, (10 * l), (10 * (l + 1)), 300);

  dibujarLinea("red", 300, (10 * (l + 1)), (10 * (-l + 29)), 300);

  dibujarLinea("blue", (10 * (-l + 29)), 0, 0, (10 * (l + 1)));

  console.log("linea " + l);

}

dibujarLinea("red", 1 , 1 , 299, 1)

dibujarLinea("blue", 1 , 299 , 299, 299)

dibujarLinea("yellow", 1 , 1 , 1, 299)

dibujarLinea("green", 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();

}


Saludos!!


Mi tarea 😃

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

function Create_line(color,x_ini,y_ini,x_end,y_end){
    lienzo.beginPath();
    lienzo.strokeStyle = color;
    lienzo.moveTo(x_ini,y_ini);
    lienzo.lineTo(x_end,y_end);
    lienzo.stroke();
    lienzo.closePath();
}
nx=lienzo.canvas.width
for (var ix = 10; ix < (nx/2); ix+=5) {
    Create_line("blue",ix,nx/2,nx/2,(nx/2)+ix)
    Create_line("green",ix,(nx/2),(nx/2),(nx/2)-ix)
    Create_line("red",nx-ix,(nx/2),(nx/2),(nx/2)-ix)
    Create_line("yellow",nx-ix,(nx/2),(nx/2),(nx/2)+ix)
}
Screenshot from 2018-01-29 18-16-05.png

Un pequeño meme que explica la diferencia entre bucles do while y while
while-do_while.jpg

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

imagen 2.jpg

Aquí mi pequeño ejercicio

Screenshot_8.jpg
Screenshot_9.jpg
Plat1.PNG
canvas.png

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.

Captura.JPG

Aquí les dejo mi aporte espero que les guste 😃
15909516_1357559514319251_671759647_n.png

CÓDIGO HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Dibujando con canvas</title>
  </head>
  <body>
    <FONT FACE="Comic Sans MS" COLOR=red>
    <center><h1> Dibujo en canvas </h1>
    </FONT>
    <canvas width="300" height="300" id="dibujito"></canvas>
    <FONT FACE="Algerian" COLOR="#ff8300">
    <p>Así queda tu dibujo</p>
    </FONT>
    <script src="dibujo.js"></script>
  </body>
</html>

CÓDIGO JavaScript:

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

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


  dibujarLinea("#0e8403", 300, yi, xf, 0);
  dibujarLinea("#ffff00", 0, yi, xf, 300);
  dibujarLinea("#ff0000", yf, 0, 0, xf);
  dibujarLinea("#0000ff", yf, 300, 300, xf);


    console.log("Linea " + l);
}

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

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!
lineas.jpg

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

![](duda.PNG

octavo.PNG
1.PNG

otro.jpg

 

Qué genial ☻ logre que todo quedara inverso

Dios la Programación es una cosa Loca :) la mejor sensación que he podido experimentar y no me tarde más de 30 minutos.


HTML:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Piramide Inversa</title>

</head>

<body>

<h1> Desafío Completo </h1>

<canvas width="300" height="300" id="carita">

</canvas>

<p> Así quedó

<script src="desafio.js">

</script>

</body>

</html>


JavaScript:

var d = document.getElementById("carita");

var lienzo = d.getContext("2d");

var lineas = 30;

var l = 0;

var xi, yf;

var color1  = "blue";

var color2  = "black"

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

{

  xi = 10 * l;

  yf = 10 * (l + 1);

  dibujarLinea(color1, xi, 0, 300, yf);

}

dibujarLinea(color2, 300,0,0,0);

dibujarLinea(color2, 300,0,300,300);

dibujarLinea(color2, 0,0,0,300);

dibujarLinea(color2, 1,300,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();

}

imagen
var d = document.getElementById("lienzoCanvas");
var d2 = document.getElementById("lienzoCanvas2");
var lienzo = d2.getContext("2d");
var lienzo2 = d.getContext("2d");

var lineas = 30;
var l = 0;
var xi, xf, yi, yf;
var nxf, nyf;
var colorcito = "FAA";
var x = 50; // x coordinate
var y = 282; // y coordinate
var radius = 15; // Arc radius
var startAngle = 0; // Starting point on circle
var endAngle = 2*Math.PI; // End point on circle

var d = document.getElementById("lienzoCanvas");
var ctx = d.getContext("2d");
var d2=document.getElementById("lienzoCanvas2");
var ctx2=d2.getContext("2d");

for(l = 0; l < lineas; l++) {
  xi = 10 * l;
  xf = 10 * l;
  yi = 10 * (l + 1);
  yf = 10 * (l + 1);
  nxf = 300 - xf;
  nyf = 300 - yf;
  dibujarLinea(lienzo, colorcito, xi, 300, 300, nyf);
  dibujarLinea(lienzo, colorcito, 0, xf, nxf, 0);
  dibujarLinea(lienzo, colorcito, 0, xf, nxf, 0);
  dibujarLinea(lienzo2, colorcito, 0, xf, yi, 300);
  dibujarLinea(lienzo2, colorcito, xi, 0, 300, yf);
  dibujarLinea(lienzo2, colorcito, xi, 0, 300, yf);
  console.log(`linea ${l}`)
}

dibujarLinea(lienzo, colorcito, 1, 299, 299, 299);
dibujarLinea(lienzo, colorcito, 299, 299, 299, 1);
dibujarLinea(lienzo, colorcito, 299, 1, 1, 1);
dibujarLinea(lienzo2, colorcito, 1, 1, 1, 299);
dibujarLinea(lienzo2, colorcito, 1, 299, 299, 299);
dibujarLinea(lienzo2, colorcito, 299, 1, 1, 1);
dibujarCirculito(ctx, 250, 282, 15, 0, 2*Math.PI)
dibujarCirculito(ctx2, 50, 282, 15, 0, 2*Math.PI)

function dibujarLinea(lienzo, color, xInicial, yInicial, xFinal, yFinal) {
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.moveTo(xInicial, yInicial);
  lienzo.lineTo(xFinal, yFinal);
  lienzo.stroke();
  lienzo.closePath();
}

function dibujarCirculito (ctx, x, y, radius, startAngle, endAngle) {

  ctx.beginPath();
  ctx.arc(x, y, radius, startAngle, endAngle);
  ctx.stroke();
  ctx.closePath();
}```

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…

Captura de Pantalla 2019-07-01 a la(s) 23.36.21.png
Captura de Pantalla 2019-07-01 a la(s) 23.37.30.png
ho_fatto_una_stella_su_canvas.png

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.

Se puede acortar mucho más el código, pero quería que sea fácil de leer

canvas.png
canvascode.png

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) +')';
}
Captura.PNG
ho_fatto_una_stella_su_canvas_2.png

Un pequeño agregado a mi código anterior.

Espero que tengan un buen día.

Freddy has creado un mounstro!!  : D;

<html>
  <head>
    <meta charset="utf-8">
    <title>lineas con canvas</title>
  </head>
  <body>

    <h1>REALIZANDO LINEAS ALEATORIAS</h1>
      <p>
        <input type="button" name="boton" value="Dibujar Lineas" id="boton">
        <input type="button" name="boton" value="Nueva Hoja" id="boton1">

      </p>
     <canvas id="hojadedibujo" width="500" height="500"></canvas>
     <script src="algoritmos.js" charset="utf-8"></script>
  </body>
</html>

algoritmos.js

var hoja = document.getElementById("hojadedibujo");
var lienzo = hoja.getContext("2d");
var botoncito =document.getElementById("boton");
botoncito.addEventListener("click", eventos);

function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal)
{
  var color ="red"
  var xinicial = aleatorio(1,499);
  var yinicial = aleatorio(1,499);
  var xfinal = aleatorio(1,499);
  var yfinal = aleatorio(1,499);
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.moveTo(xinicial, yinicial);
  lienzo.lineTo(xfinal, yfinal);
  lienzo.stroke();
  lienzo.closePath();
};

function eventos()
{
  var espacio= aleatorio(0,499);
  var lineas = aleatorio(0,499);
  reDibujar();
  for(l = 0; l < lineas; l++)
  {
    yinicial = espacio * l;
    xfinal = espacio * (l + 1);
    dibujarLinea();
  }
};

function aleatorio(min, maxi)
{
  var resultado;
  resultado = Math.floor(Math.random() * (maxi - min + 1)) + min;
  return resultado;
};

var limpiar = document.getElementById("boton1");
limpiar.addEventListener("click",reDibujar);

function reDibujar()
{
  var canvas = document.getElementById("hojadedibujo");
  var lienzo = canvas.getContext("2d");
  var canvas1 = hoja.width;
  if (canvas1= false);
  {
    canvas.width=hoja.width
  }
};


Mi Canvas en forma de cono.

var d = document.getElementById('dibujito');
var lienzo = d.getContext("2d");
var lineas = 180;
var l = 0;
var xi,yi,xf,yf;
dibujarCirculo(200,200,"#63BF32");
dibujarCirculo(190,190,"#427F21");
dibujarCirculo(180,180,"#85FF43");
dibujarCirculo(170,170,"#214011");
dibujarCirculo(160,160,"#77E53C");
dibujarCirculo(150,150,"#63BF32");
dibujarCirculo(140,140,"#427F21");
dibujarCirculo(130,130,"#85FF43");
dibujarCirculo(120,120,"#214011");
dibujarCirculo(110,110,"#77E53C");
dibujarCirculo(100,100,"#63BF32");
dibujarCirculo(90,90,"#427F21");
dibujarCirculo(80,80,"#85FF43");
dibujarCirculo(70,70,"#214011");
dibujarCirculo(60,60,"#77E53C");
dibujarCirculo(50,50,"#63BF32");
dibujarCirculo(40,40,"#427F21");
dibujarCirculo(30,30,"#85FF43");
dibujarCirculo(20,20,"#214011");
dibujarCirculo(10,10,"#77E53C");

function dibujarCirculo(centro,radio,color) {
  for(a=0;a<180;a++){
    xi=(Math.cos(a * Math.PI / 180)*radio)+centro;
    yi=(Math.sin(a * Math.PI / 180)*radio)+centro;
    xf=(Math.cos(a * Math.PI / 180)*-radio)+centro;
    yf=(Math.sin(a * Math.PI / 180)*-radio)+centro;
    dibujarLinea(xi,yi,xf,yf,color);
  }
}

function dibujarLinea( xi, yi, xf, yf, color) {
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.moveTo(xi,yi);
  lienzo.lineTo(xf,yf);
  lienzo.stroke();
  lienzo.closePath();
}```

Pues esta es mi versión para completar el ejercicio:
Mi Dibujo.PNG

for(l=0; l<lineas; l++)
{
  yi = 10 * l;
  xf = 10 * (l + 1);
  dibujarLinea(colorsito, 0, yi, xf, 300); //Dibujar lineas desde lado izquierdo_inferior
  yi = 310 - (10 * (l + 1));
  dibujarLinea(colorsito, 0, yi, xf, 0); //Dibujar lineas desde lado iquierda_superior
  yi = 10 * l;
  xf = 300 - (10 * (l + 1));
  dibujarLinea(colorsito, 300, yi, xf, 300); //Dibujar lineas desde lado derecho_inferior
  yi = 310 - (10 * (l + 1));
  dibujarLinea(colorsito, 300, yi, xf, 0); //Dibujar lineas desde lado izquierdo_superior
  console.log("linea" + 1);
}```

Hola Mundo.

Canvas-play.jpg
canvas.PNG

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%!
![](Screenshot from 2019-08-27 09-47-57.png

2019-12-16.png

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

Captura de Pantalla 2020-04-15 a la(s) 01.41.04.png
dibujo-canvas.jpg
ejercicio.jpg

este es mi ejercicio

canvas.jpg
Canvas 3.png

😄

Mi dibujo emulando el ejemplo de un compañero.1.png

dibujando con Canvas.JPG

Este hice yo, me tomó un buen rato
mi dibujito.png

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

)

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

![](Annotation 2020-05-02 165119.jpg``

<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);>
Sin título.png

DIBUJANDO EN CANVAS (40 LINEAS)

CANVAS.png

Captura de pantalla (27).png

Hola! 

Lo que hice fue invertir los numeros en esta linea:

    //dibujarLinea(colorcito, 0, yi, xf, 300);
    dibujarLinea(colorcito, 300, yi, xf, 0);

![](canvasFinal.jpg

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

Anotación 2019-12-17 214204.pngAnotación 2019-12-17 214252.png

Screenshot_1.png

Genial

El reto:
canvas.PNG

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
Capturdfgde.PNG

descarga.png
Captura de Pantalla 2020-05-04 a la(s) 8.47.32 p. m..png
javascript2.png

Como no recordar estas cosas en el papel

screencapture-file-C-Users-gabri-OneDrive-Documentos-progbasica-Canvas-dibujo-html-2020-05-10-15_45_38.png
Untitled.png
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();
}

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):
Screenshot_20200603_230009.png

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

Listo así me quedo

while.jpg
<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++
}

var d = document.getElementById(“Dibujo”);
var lienzo = d.getContext(“2d”);
var Limite = 30;
var Yi = 0;
var Yf = 10;
var Xi = 0;
var Xf = 10;
var Constante = 10

DibujarLinea(“blue”, 1, 1, 1, 299);
DibujarLinea(“blue”, 299, 299, 1, 299);
DibujarLinea(“blue”, 299, 1, 299, 299);
DibujarLinea(“blue”, 1, 1, 299, 1);

for (L = 0; L < Limite; L++)
{
DibujarLinea(“green”, 0, Yi, Xf, 300);
DibujarLinea(“yellow”, 300, Yi, Xf, 0);
DibujarLinea(“red”, 300, Yi, (300 - Xf), 300);
DibujarLinea(“blue”, 0, (300 - Yi), Xf, 0);
DibujarLinea(“orange”, 150, Yi, (150 - Xf), 300);
DibujarLinea(“aqua”, 150, Yi, (300 - Xf), 150);
DibujarLinea(“orange”, 150, Yi, (150 + Xf), 300);
DibujarLinea(“aqua”, 150, (300 - Yi), (300 - Xf), 150);

Yi = Yi + Constante;
Xf = Xf + Constante
}

function DibujarLinea(Color, Xinicial, Yinicial, Xfinal, Yfinal)
{
lienzo.beginPath();
lienzo.strokeStyle = Color;
lienzo.moveTo(Xinicial,Yinicial);
lienzo.lineTo(Xfinal,Yfinal);
lienzo.stroke();
lienzo.closePath();
}

![](1.png

Programacion Platzi bucles for y while.jpg

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

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>

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>
imagen-canvas.png

Sin título.png
Comparto mi dibujo libre =)

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.

lineas2.png
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)
<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);
>
descarga.png
Captura.PNG

Así quedó el dibujo:
Canvas.jpg

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
dibujito.PNG
dibijuto_resultado.PNG

Modifique el código para que me pregunte:

1ro el color de la linea

2do la dirección de las líneas (derecha o izquierda).

Espero les sirva.


var d = document.getElementById("dibujito"); //metodo del elemento

var lienzo = d.getContext("2d"); //metodo del canvas contexto 2d

var lineas = 30;

var l = 0;

var yi, xf;

var colorlinea =prompt("Que color quiere las lineas?");

var direccion_linea = prompt("Derecha = 1, Izquierda = 2");


if (direccion_linea == 1)

{

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

  {

    yi = 10 * l;

    xf = 300 - yi;

    dibujarlinea(colorlinea,300, yi, xf, 300);

    console.log("linea" + l);

  }

  dibujarlinea(colorlinea, 299, 1, 299, 299);

  dibujarlinea(colorlinea, 1, 299, 299, 299);

  }

  else if (direccion_linea == 2)

  {

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

    {

      yi = 10 * l;

      xf = 10 * (l + 1);

      dibujarlinea(colorlinea,0, yi, xf, 300);

      console.log("linea" + l);

    }

    dibujarlinea(colorlinea, 1, 1, 1, 299);

    dibujarlinea(colorlinea, 1, 299, 299, 299);

  }

  else

    {

    alert("tienes que escoger una direccion: Derecha = 1, Izquierda = 2");

    }


function dibujarlinea(color, xinicial, yinicial, xfinal, yfinal)

{

  lienzo.beginPath(); 

  lienzo.strokeStyle = color;

  lienzo.moveTo(xinicial, yinicial); 

  lienzo.lineTo(xfinal, yfinal); 

  lienzo.stroke();

  lienzo.closePath(); 



}

dibujito.jpg
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!

Aquí como me quedo agregando las otras dos esquinas 


 

Este es mi Ejercicio de Ciclos en JavaScript, espero haberlo hecho bien! xD

ejercicio Platzi.png

🐱‍💻 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();
}
Reto.png
Captura de pantalla 2017-07-04 a la(s) 9.24.05 a.m..png
var d = document.getElementById('dibujito');
var lienzo = d.getContext("2d");
var lineas = 30
var l = 0;
var yi, xf;

for (l ; l< lineas; l++) 
 	
{
	yi= 10 * l
	xf = 10 * (l + 1)
	dibujarLinea ("#DADADA", 150, 0, xf, 150)
	dibujarLinea ("#DADADA", 150, 300, xf, 150)
	dibujarLinea ("#DADADA", 150, 300, xf, 150)
	dibujarLinea ("#DADADA", 0, 150, 150, yi)
	dibujarLinea ("#DADADA", 300, 150, 150, yi)

	console.log ("linea" + l)
}

function dibujarLinea (color,xinicia,yinicial,xfinal,yfinal)

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

que mejor que aprender haciendo cosas que te gustan!!sharingan.png

dibujo3.png
Ojo.png
Codigo_ojo.png
var d = document.getElementById("dibujito");
var lienzo = d.getContext("2d");
var lineas = 30;
var l = 0;
var yf, xi;
var yi, xf;
var xf2;
var colorsito = "skyblue";

for(l = 0; l < lineas; l++)
{
  yf = yi = 10 * l;
  xi = xf = 10 * (l + 1);
  xf2 = xi2 = 290 - (l * 10);
  dibujarLinea(colorsito, xi, 0, 300, yf);
  dibujarLinea(colorsito, 0, yi, xf, 300);
  dibujarLinea(colorsito, 300, yi, xf2, 300);
  dibujarLinea(colorsito, xi2, 0, 0, yf);
  console.log("linea" + l);
}

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

Así quedó!
Canvas.jpg

Dibuje la portada del álbum “The Dark Side Of The Moon” (Pink Floyd) utilizando lo aprendido.

MI DIBUJO.png

¡Espero les guste! 😃

¿Por qué el mío no se ve igual?
homer.PNG
torre.PNG

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

(hexagono.PNG

Diagrama invertido con colores aleatorios 😄

Screenshot_20170712_092539.png
//alert("Sí funciona");

var d = document.getElementById("dibujito"); // Obtener valor desde el html
var lienzo = d.getContext("2d"); // Parte del lienzo
var l = 0;
var l2 = 0;
var lineas=50;
var yi,xf;

//dibujarLinea("red", 0,0,10,300);
console.log(lienzo);

while(l<lineas){
	yi = 10 * l;
	xf = 10 * (l+1);
	dibujarLinea(obtenerColorAleatorio(), 0, yi, xf,500);
	dibujarLinea(obtenerColorAleatorio(), 500, yi, xf,0);
	//dibujarLinea(color3, 500, yi, xf,0);
	console.log("Linea es: "+l);
	l++;
}
// Borde inferior izquierdoobtenerColorAleatorio()
dibujarLinea(obtenerColorAleatorio(), 1,1,1,499);
dibujarLinea(obtenerColorAleatorio(), 1,499,499,499);

// Borde superior derecho
dibujarLinea(obtenerColorAleatorio(), 499,499,499,1);
dibujarLinea(obtenerColorAleatorio(), 499,1,1,1);

function dibujarLinea (color, xinicial, yinicial, xfinal, yfinal){
	lienzo.beginPath(); // Iniciar trazado
	lienzo.strokeStyle = color; // Propiedad => Color de la línea
	lienzo.moveTo(xinicial,yinicial); // Inicio del punto de trazado
	lienzo.lineTo(xfinal,yfinal); // Final del punto de trazado
	lienzo.stroke(); // Dibuja la línea
	lienzo.closePath(); // Cerrar el trazo, levantar el lápiz
}

function numeroAletario(inferior, superior){
	numPosibilidades = superior-inferior;
	numero = Math.floor(Math.random()*numPosibilidades);
	return parseInt(inferior) + numero;
}

function obtenerColorAleatorio(){
	hexadecimalArray = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
	colorAleatorio="#"; // Inicia el primer valor del color hexadecimal

	// Generar un color aletario para cada línea
	for (i=0;i<6;i++){
		numero = numeroAletario(0, hexadecimalArray.length); // define un número aleatorio entre 0 el tamaño del array de los colores hexadecimales
		colorAleatorio += hexadecimalArray[numero]; // Concatena el string del color
	}
	return colorAleatorio;
}

**Aporte 😃 **
Captura33.PNG

En el video Freddy hablaba sobre el ambito de las variables, investigue un poco al respecto y lo que encontre es que básicamente, cuando se declaran variables fuera de cualquier bloque de código, o fuera de las llavez que delimitan los mismos, esta es una variable global y se puede acceder a ella desde cualquier lugar del archivo, pero cuando por el contrario las declaramos en un bloque de código como una función o un ciclo, esta es una variable local y esta solo afecta el código en ese bloque. Por lo tanto se pueden tener 2 variables con el mismo nombre siempre y cuando una sea global y la otra local, aunque esta no es una práctica muy recomendable.

En este enlace hay mas información sobre esto, además de ejemplos prácticos: https://desarrolloweb.com/articulos/517.php

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

Screen Shot 2018-11-02 at 20.24.12.png

La verdad yo aproveche para dedicarle un mensaje a mi novia, así sino gano puntos en el curso al menos gano puntos con ella (eso espero…) while.png

Mi intento xd canvas.jpg

listo

Captura.PNG

ejercicio_platzi.JPG
mi ejercicio con algunas adicciones =)

Mi pequeño dibujo.
Captura de Pantalla 2019-07-15 a la(s) 5.01.28 p. m..png

Solo cambié el orden, y mi dibujo quedó invertido, pero no sé si eso era lo que tenia que hacer. 


function dibujarLinea(color, yfinal, xfinal, yinicial, xinicial)
Captura de Pantalla 2019-09-26 a la(s) 4.22.20 p. m..jpg

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 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.
.
Captura.JPG

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

Mi aporte

Captura de pantalla de 2017-11-11 01-42-29.jpg

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

for( i = 0; i <= 30; i++){
//Lineas de la parte inferior derecha
var l_xi = 0;
var l_yi = i * 10;
var l_xf = i * 10 + 10;
var l_yf = 300;
dibujarLinea("#830000", l_xi, l_yi, l_xf, l_yf);
//Lineas de la parte superior izquierda
dibujarLinea("#830000", l_xf, l_xi, l_yf, l_yi);
//Lineas de la parte inferior derecha
var l_xi = i * 10;
var l_xf = 300;
var l_yf = 300 - (i * 10 + 10);
var l_yi = 300;
dibujarLinea("#830000", l_xi, l_yi, l_xf, l_yf);
//Lineas de la parte superior izquierda
dibujarLinea("#830000", 0, l_yf, l_xi, 0);
}

for (z = 7; z <= 23; z++){
var l_xi = 150;
var l_yi = 40;
var l_xf = z * 10;
var l_yf = 150;
//Parte superior rombo
dibujarLinea("#830000", l_xi, l_yi, l_xf, l_yf);
//Parte inferior rombo
dibujarLinea("#830000", l_xi, 260, l_xf, l_yf);
//Parte izquierda rombo
dibujarLinea("#830000", l_yi, l_xi, l_yf, l_xf);
//Parte derecha rombo
dibujarLinea("#830000", 260, l_xi, l_yf, l_xf);
}

for (z = 1; z <= 14; z++){
var l_xi = 80;
var l_yi = 80;
var l_xf = (z + 7) * 10;
var l_yf = 220 - (z * 10);
//superior izquierda cuadro
dibujarLinea("#830000", l_xi, l_yi, l_xf, l_yf);
//inferior derecha cuadro
dibujarLinea("#830000", 210, 210, l_xf, l_yf);
//inferior izquierda cuadro
dibujarLinea("#830000", l_xi, 210, l_xf, l_xf);
//Psuperior derecha cuadro
dibujarLinea("#830000", 210, l_yi, l_xf, l_xf);
}

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

Hice una estrella 😛
estrellita.jpg
codigoestrellita.jpg

var d = document.getElementById("dibujito"); //Se almacena el canvas
var lienzo = d.getContext("2d") ; // Método del Objeto Canvas
var lineas = 30; //Establece el número de ciclo
var l = 0; // Es la variable que cuenta las líneas
var yi, xf; // variable para colocar el valor creciente del ciclo
var colorcito = "purple";

// Crear Ciclo

for(l = 0; l < lineas; l++)
{
  yi= 10 * l; //se le da valor a la variable creciente mediante ecuación matemática
  xf= 10 * (l + 1); // se le da valor a la variable creciente mediante ecuación matemática
  dibujarLinea(colorcito, 0, yi, xf, 300) //se sustituyen valores por variales de valor creciente
  dibujarBorde()
}

//Javascript primero lee el código, encuentra funciones, y después lo que está después de la función

function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal)
{
  lienzo.beginPath(); // Empieza Trazo
  lienzo.strokeStyle = color; // Dibuja Línea
  lienzo.moveTo(xinicial, yinicial); // Inicio de la Línea
  lienzo.lineTo(xfinal, yfinal); // Final de la Línea
  lienzo.stroke(); // Tipo de Línea
  lienzo.closePath(); // Levanta el punto
}
function dibujarBorde()
{
  dibujarLinea(colorcito, 0, 0, 0, 300);
  dibujarLinea(colorcito, 0, 300, 300, 300);
  dibujarLinea(colorcito, 0, 0, 300, 0);
  dibujarLinea(colorcito, 300, 0, 300, 300);
}
recorte.JPG

No me quedé con las ganas e hice los cuatro lados utilizando FOR. Quedó bastante colorido...


<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>Dibujando con canvas</title>

  </head>

  <body>

    <h1>Dibujo en Canvas</h1>

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

    <p>Mi Propio Desafío</p>

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

  </body>

</html>


var d = document.getElementById("dibujito");

var lienzo = d.getContext("2d");

var lineas = 30;

var l = 0;


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

{

  dibujarLinea("yellow", (10 * l), 0, 300, (10 * (l + 1)));

  dibujarLinea("green", 0, (10 * l), (10 * (l + 1)), 300);

  dibujarLinea("red", 300, (10 * (l + 1)), (10 * (-l + 29)), 300);

  dibujarLinea("blue", (10 * (-l + 29)), 0, 0, (10 * (l + 1)));

  console.log("linea " + l);

}

dibujarLinea("red", 1 , 1 , 299, 1)

dibujarLinea("blue", 1 , 299 , 299, 299)

dibujarLinea("yellow", 1 , 1 , 1, 299)

dibujarLinea("green", 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();

}


Saludos!!


Mi tarea 😃

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

function Create_line(color,x_ini,y_ini,x_end,y_end){
    lienzo.beginPath();
    lienzo.strokeStyle = color;
    lienzo.moveTo(x_ini,y_ini);
    lienzo.lineTo(x_end,y_end);
    lienzo.stroke();
    lienzo.closePath();
}
nx=lienzo.canvas.width
for (var ix = 10; ix < (nx/2); ix+=5) {
    Create_line("blue",ix,nx/2,nx/2,(nx/2)+ix)
    Create_line("green",ix,(nx/2),(nx/2),(nx/2)-ix)
    Create_line("red",nx-ix,(nx/2),(nx/2),(nx/2)-ix)
    Create_line("yellow",nx-ix,(nx/2),(nx/2),(nx/2)+ix)
}
Screenshot from 2018-01-29 18-16-05.png

Un pequeño meme que explica la diferencia entre bucles do while y while
while-do_while.jpg

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

imagen 2.jpg

Aquí mi pequeño ejercicio

Screenshot_8.jpg
Screenshot_9.jpg
Plat1.PNG
canvas.png

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.

Captura.JPG

Aquí les dejo mi aporte espero que les guste 😃
15909516_1357559514319251_671759647_n.png

CÓDIGO HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Dibujando con canvas</title>
  </head>
  <body>
    <FONT FACE="Comic Sans MS" COLOR=red>
    <center><h1> Dibujo en canvas </h1>
    </FONT>
    <canvas width="300" height="300" id="dibujito"></canvas>
    <FONT FACE="Algerian" COLOR="#ff8300">
    <p>Así queda tu dibujo</p>
    </FONT>
    <script src="dibujo.js"></script>
  </body>
</html>

CÓDIGO JavaScript:

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

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


  dibujarLinea("#0e8403", 300, yi, xf, 0);
  dibujarLinea("#ffff00", 0, yi, xf, 300);
  dibujarLinea("#ff0000", yf, 0, 0, xf);
  dibujarLinea("#0000ff", yf, 300, 300, xf);


    console.log("Linea " + l);
}

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

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!
lineas.jpg

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

![](duda.PNG

octavo.PNG
1.PNG

otro.jpg

 

Qué genial ☻ logre que todo quedara inverso

Dios la Programación es una cosa Loca :) la mejor sensación que he podido experimentar y no me tarde más de 30 minutos.


HTML:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Piramide Inversa</title>

</head>

<body>

<h1> Desafío Completo </h1>

<canvas width="300" height="300" id="carita">

</canvas>

<p> Así quedó

<script src="desafio.js">

</script>

</body>

</html>


JavaScript:

var d = document.getElementById("carita");

var lienzo = d.getContext("2d");

var lineas = 30;

var l = 0;

var xi, yf;

var color1  = "blue";

var color2  = "black"

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

{

  xi = 10 * l;

  yf = 10 * (l + 1);

  dibujarLinea(color1, xi, 0, 300, yf);

}

dibujarLinea(color2, 300,0,0,0);

dibujarLinea(color2, 300,0,300,300);

dibujarLinea(color2, 0,0,0,300);

dibujarLinea(color2, 1,300,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();

}

imagen
var d = document.getElementById("lienzoCanvas");
var d2 = document.getElementById("lienzoCanvas2");
var lienzo = d2.getContext("2d");
var lienzo2 = d.getContext("2d");

var lineas = 30;
var l = 0;
var xi, xf, yi, yf;
var nxf, nyf;
var colorcito = "FAA";
var x = 50; // x coordinate
var y = 282; // y coordinate
var radius = 15; // Arc radius
var startAngle = 0; // Starting point on circle
var endAngle = 2*Math.PI; // End point on circle

var d = document.getElementById("lienzoCanvas");
var ctx = d.getContext("2d");
var d2=document.getElementById("lienzoCanvas2");
var ctx2=d2.getContext("2d");

for(l = 0; l < lineas; l++) {
  xi = 10 * l;
  xf = 10 * l;
  yi = 10 * (l + 1);
  yf = 10 * (l + 1);
  nxf = 300 - xf;
  nyf = 300 - yf;
  dibujarLinea(lienzo, colorcito, xi, 300, 300, nyf);
  dibujarLinea(lienzo, colorcito, 0, xf, nxf, 0);
  dibujarLinea(lienzo, colorcito, 0, xf, nxf, 0);
  dibujarLinea(lienzo2, colorcito, 0, xf, yi, 300);
  dibujarLinea(lienzo2, colorcito, xi, 0, 300, yf);
  dibujarLinea(lienzo2, colorcito, xi, 0, 300, yf);
  console.log(`linea ${l}`)
}

dibujarLinea(lienzo, colorcito, 1, 299, 299, 299);
dibujarLinea(lienzo, colorcito, 299, 299, 299, 1);
dibujarLinea(lienzo, colorcito, 299, 1, 1, 1);
dibujarLinea(lienzo2, colorcito, 1, 1, 1, 299);
dibujarLinea(lienzo2, colorcito, 1, 299, 299, 299);
dibujarLinea(lienzo2, colorcito, 299, 1, 1, 1);
dibujarCirculito(ctx, 250, 282, 15, 0, 2*Math.PI)
dibujarCirculito(ctx2, 50, 282, 15, 0, 2*Math.PI)

function dibujarLinea(lienzo, color, xInicial, yInicial, xFinal, yFinal) {
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.moveTo(xInicial, yInicial);
  lienzo.lineTo(xFinal, yFinal);
  lienzo.stroke();
  lienzo.closePath();
}

function dibujarCirculito (ctx, x, y, radius, startAngle, endAngle) {

  ctx.beginPath();
  ctx.arc(x, y, radius, startAngle, endAngle);
  ctx.stroke();
  ctx.closePath();
}```

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…

Captura de Pantalla 2019-07-01 a la(s) 23.36.21.png
Captura de Pantalla 2019-07-01 a la(s) 23.37.30.png
ho_fatto_una_stella_su_canvas.png

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.

Se puede acortar mucho más el código, pero quería que sea fácil de leer

canvas.png
canvascode.png

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) +')';
}
Captura.PNG
ho_fatto_una_stella_su_canvas_2.png

Un pequeño agregado a mi código anterior.

Espero que tengan un buen día.

Freddy has creado un mounstro!!  : D;

<html>
  <head>
    <meta charset="utf-8">
    <title>lineas con canvas</title>
  </head>
  <body>

    <h1>REALIZANDO LINEAS ALEATORIAS</h1>
      <p>
        <input type="button" name="boton" value="Dibujar Lineas" id="boton">
        <input type="button" name="boton" value="Nueva Hoja" id="boton1">

      </p>
     <canvas id="hojadedibujo" width="500" height="500"></canvas>
     <script src="algoritmos.js" charset="utf-8"></script>
  </body>
</html>

algoritmos.js

var hoja = document.getElementById("hojadedibujo");
var lienzo = hoja.getContext("2d");
var botoncito =document.getElementById("boton");
botoncito.addEventListener("click", eventos);

function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal)
{
  var color ="red"
  var xinicial = aleatorio(1,499);
  var yinicial = aleatorio(1,499);
  var xfinal = aleatorio(1,499);
  var yfinal = aleatorio(1,499);
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.moveTo(xinicial, yinicial);
  lienzo.lineTo(xfinal, yfinal);
  lienzo.stroke();
  lienzo.closePath();
};

function eventos()
{
  var espacio= aleatorio(0,499);
  var lineas = aleatorio(0,499);
  reDibujar();
  for(l = 0; l < lineas; l++)
  {
    yinicial = espacio * l;
    xfinal = espacio * (l + 1);
    dibujarLinea();
  }
};

function aleatorio(min, maxi)
{
  var resultado;
  resultado = Math.floor(Math.random() * (maxi - min + 1)) + min;
  return resultado;
};

var limpiar = document.getElementById("boton1");
limpiar.addEventListener("click",reDibujar);

function reDibujar()
{
  var canvas = document.getElementById("hojadedibujo");
  var lienzo = canvas.getContext("2d");
  var canvas1 = hoja.width;
  if (canvas1= false);
  {
    canvas.width=hoja.width
  }
};


Mi Canvas en forma de cono.

var d = document.getElementById('dibujito');
var lienzo = d.getContext("2d");
var lineas = 180;
var l = 0;
var xi,yi,xf,yf;
dibujarCirculo(200,200,"#63BF32");
dibujarCirculo(190,190,"#427F21");
dibujarCirculo(180,180,"#85FF43");
dibujarCirculo(170,170,"#214011");
dibujarCirculo(160,160,"#77E53C");
dibujarCirculo(150,150,"#63BF32");
dibujarCirculo(140,140,"#427F21");
dibujarCirculo(130,130,"#85FF43");
dibujarCirculo(120,120,"#214011");
dibujarCirculo(110,110,"#77E53C");
dibujarCirculo(100,100,"#63BF32");
dibujarCirculo(90,90,"#427F21");
dibujarCirculo(80,80,"#85FF43");
dibujarCirculo(70,70,"#214011");
dibujarCirculo(60,60,"#77E53C");
dibujarCirculo(50,50,"#63BF32");
dibujarCirculo(40,40,"#427F21");
dibujarCirculo(30,30,"#85FF43");
dibujarCirculo(20,20,"#214011");
dibujarCirculo(10,10,"#77E53C");

function dibujarCirculo(centro,radio,color) {
  for(a=0;a<180;a++){
    xi=(Math.cos(a * Math.PI / 180)*radio)+centro;
    yi=(Math.sin(a * Math.PI / 180)*radio)+centro;
    xf=(Math.cos(a * Math.PI / 180)*-radio)+centro;
    yf=(Math.sin(a * Math.PI / 180)*-radio)+centro;
    dibujarLinea(xi,yi,xf,yf,color);
  }
}

function dibujarLinea( xi, yi, xf, yf, color) {
  lienzo.beginPath();
  lienzo.strokeStyle = color;
  lienzo.moveTo(xi,yi);
  lienzo.lineTo(xf,yf);
  lienzo.stroke();
  lienzo.closePath();
}```

Pues esta es mi versión para completar el ejercicio:
Mi Dibujo.PNG

for(l=0; l<lineas; l++)
{
  yi = 10 * l;
  xf = 10 * (l + 1);
  dibujarLinea(colorsito, 0, yi, xf, 300); //Dibujar lineas desde lado izquierdo_inferior
  yi = 310 - (10 * (l + 1));
  dibujarLinea(colorsito, 0, yi, xf, 0); //Dibujar lineas desde lado iquierda_superior
  yi = 10 * l;
  xf = 300 - (10 * (l + 1));
  dibujarLinea(colorsito, 300, yi, xf, 300); //Dibujar lineas desde lado derecho_inferior
  yi = 310 - (10 * (l + 1));
  dibujarLinea(colorsito, 300, yi, xf, 0); //Dibujar lineas desde lado izquierdo_superior
  console.log("linea" + 1);
}```

Hola Mundo.

Canvas-play.jpg
canvas.PNG

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%!
![](Screenshot from 2019-08-27 09-47-57.png

2019-12-16.png

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

Captura de Pantalla 2020-04-15 a la(s) 01.41.04.png
dibujo-canvas.jpg
ejercicio.jpg

este es mi ejercicio

canvas.jpg
Canvas 3.png

😄

Mi dibujo emulando el ejemplo de un compañero.1.png

dibujando con Canvas.JPG

Este hice yo, me tomó un buen rato
mi dibujito.png

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

)

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

![](Annotation 2020-05-02 165119.jpg``

<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);>
Sin título.png

DIBUJANDO EN CANVAS (40 LINEAS)

CANVAS.png

Captura de pantalla (27).png

Hola! 

Lo que hice fue invertir los numeros en esta linea:

    //dibujarLinea(colorcito, 0, yi, xf, 300);
    dibujarLinea(colorcito, 300, yi, xf, 0);

![](canvasFinal.jpg

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

Anotación 2019-12-17 214204.pngAnotación 2019-12-17 214252.png

Screenshot_1.png

Genial

El reto:
canvas.PNG

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
Capturdfgde.PNG

descarga.png
Captura de Pantalla 2020-05-04 a la(s) 8.47.32 p. m..png
javascript2.png

Como no recordar estas cosas en el papel

screencapture-file-C-Users-gabri-OneDrive-Documentos-progbasica-Canvas-dibujo-html-2020-05-10-15_45_38.png
Untitled.png
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();
}

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):
Screenshot_20200603_230009.png

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

Listo así me quedo

while.jpg
<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++
}

var d = document.getElementById(“Dibujo”);
var lienzo = d.getContext(“2d”);
var Limite = 30;
var Yi = 0;
var Yf = 10;
var Xi = 0;
var Xf = 10;
var Constante = 10

DibujarLinea(“blue”, 1, 1, 1, 299);
DibujarLinea(“blue”, 299, 299, 1, 299);
DibujarLinea(“blue”, 299, 1, 299, 299);
DibujarLinea(“blue”, 1, 1, 299, 1);

for (L = 0; L < Limite; L++)
{
DibujarLinea(“green”, 0, Yi, Xf, 300);
DibujarLinea(“yellow”, 300, Yi, Xf, 0);
DibujarLinea(“red”, 300, Yi, (300 - Xf), 300);
DibujarLinea(“blue”, 0, (300 - Yi), Xf, 0);
DibujarLinea(“orange”, 150, Yi, (150 - Xf), 300);
DibujarLinea(“aqua”, 150, Yi, (300 - Xf), 150);
DibujarLinea(“orange”, 150, Yi, (150 + Xf), 300);
DibujarLinea(“aqua”, 150, (300 - Yi), (300 - Xf), 150);

Yi = Yi + Constante;
Xf = Xf + Constante
}

function DibujarLinea(Color, Xinicial, Yinicial, Xfinal, Yfinal)
{
lienzo.beginPath();
lienzo.strokeStyle = Color;
lienzo.moveTo(Xinicial,Yinicial);
lienzo.lineTo(Xfinal,Yfinal);
lienzo.stroke();
lienzo.closePath();
}

![](1.png

Programacion Platzi bucles for y while.jpg

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

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>

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>
imagen-canvas.png

Sin título.png
Comparto mi dibujo libre =)

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.

lineas2.png
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)
<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);
>
descarga.png
Captura.PNG

Así quedó el dibujo:
Canvas.jpg

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
dibujito.PNG
dibijuto_resultado.PNG

Modifique el código para que me pregunte:

1ro el color de la linea

2do la dirección de las líneas (derecha o izquierda).

Espero les sirva.


var d = document.getElementById("dibujito"); //metodo del elemento

var lienzo = d.getContext("2d"); //metodo del canvas contexto 2d

var lineas = 30;

var l = 0;

var yi, xf;

var colorlinea =prompt("Que color quiere las lineas?");

var direccion_linea = prompt("Derecha = 1, Izquierda = 2");


if (direccion_linea == 1)

{

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

  {

    yi = 10 * l;

    xf = 300 - yi;

    dibujarlinea(colorlinea,300, yi, xf, 300);

    console.log("linea" + l);

  }

  dibujarlinea(colorlinea, 299, 1, 299, 299);

  dibujarlinea(colorlinea, 1, 299, 299, 299);

  }

  else if (direccion_linea == 2)

  {

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

    {

      yi = 10 * l;

      xf = 10 * (l + 1);

      dibujarlinea(colorlinea,0, yi, xf, 300);

      console.log("linea" + l);

    }

    dibujarlinea(colorlinea, 1, 1, 1, 299);

    dibujarlinea(colorlinea, 1, 299, 299, 299);

  }

  else

    {

    alert("tienes que escoger una direccion: Derecha = 1, Izquierda = 2");

    }


function dibujarlinea(color, xinicial, yinicial, xfinal, yfinal)

{

  lienzo.beginPath(); 

  lienzo.strokeStyle = color;

  lienzo.moveTo(xinicial, yinicial); 

  lienzo.lineTo(xfinal, yfinal); 

  lienzo.stroke();

  lienzo.closePath(); 



}

dibujito.jpg
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!