Entrar ¿Aún no tienes acceso?
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Solucionado (ver solución)
Solucionado
(ver solución)
4
respuestas

Cuadros Iterantes

Referente al curso Lógica de programación: Practicando con juegos y animaciones, en el capítulo Utilizando funciones y actividad Las iteraciones son fantásticas

por Roberto Raúl Gutiérrez Olivas
| 127.3k xp | 282 posts
Diseño gráfico

Mi objetivo es que cada cuadro obtenga un color diferente desde una lista de valores HEX en un array. No lo he logrado aún, he llegado hasta que cada vez que se actualice la página, se generan nuevos colores, pero seguiré buscando la manera correcta. Sugerencias? Gracias!

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad 

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Canvas JS</title>
  </head>

  <body>
    <canvas width="800" height="600"> </canvas>

    <script>
      // obtener color random ------->
      const colorList = [
        "#ff48c4",
        "#2bd1fc",
        "#f3ea5f",
        "#c04df9",
        "#ff3f3",
        "yellow",
        "magenta",
        "tomato",
      ];

      var randomColor1 = colorList[Math.floor(Math.random() * colorList.length)];
      var randomColor2 = colorList[Math.floor(Math.random() * colorList.length)];
      var randomColor3 = colorList[Math.floor(Math.random() * colorList.length)];

      // funcion dibujar cuadro
      function drawSquare(x, y, randomColor, lineWidth, borderColor) {
        var screen = document.querySelector("canvas");
        var brush = screen.getContext("2d");
        // grosor de línea borde
        brush.lineWidth = lineWidth;
        // color y tamaño de borde y relleno
        brush.fillStyle = randomColor;
        brush.fillRect(x, y, 50, 50);
        brush.strokeStyle = borderColor;
        brush.strokeRect(x, y, 50, 50);
      }

      var x = 0;
      while(x < 800) {
        drawSquare(x, 20, randomColor1, 2, "white");
        drawSquare(x, 70, randomColor2, 2, "white");
        drawSquare(x, 120, randomColor3, 2, "white");
        x = x + 50;
      };
    </script>

  </body>
</html>
4 respuestas
solución!
por Estudiante
| 129k xp | 153 posts

Hola Roberto

Pon el random dentro del bucle while

Así asignas a cada cuadro un color diferente 

 while(x < 800) {
 randomColor1 = colorList[Math.floor(Math.random() * colorList.length)];
 drawSquare(x, 20, randomColor1, 2, "white");
};

Entiendes?

Cualquier dudas que tengas tan sólo avísame Saludos.-

Si el aporte te ayudó, marca como solucionado ✓
por Roberto Raúl Gutiérrez Olivas
| 127.3k xp | 282 posts
Diseño gráfico

Al tiempo de subirlo y salir a encargos familiares, tuve esa idea, ponerlo en un loop while. Tu acabas de dar en el clavo. Me gusta esto para generar canvas y formas del tamaño y colores que el usuario pueda necesitar.

Gracias Leandro!

por Estudiante
| 129k xp | 153 posts

De nada Roberto

Un placer haber podido colaborar

Ante cualquier duda, quedo a disposición

Abrazo grande

Si el aporte te ayudó, marca como solucionado ✓
por Roberto Raúl Gutiérrez Olivas
| 127.3k xp | 282 posts
Diseño gráfico

No logré aún llenar un canvas de cuadros al azar. Logro una columna o una fila, pero no ambos al mismo tiempo. Falta trabajar más el "while", pero obtuve esto. Se ve bien jaja

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad 

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Canvas JS</title>
  </head>

  <body>

    <canvas width="600" height="600"> </canvas>

    <style>
      canvas{
        background-color: bisque;
      }
    </style>

    <script>
      // OBTENER COLOR RANDOM DESDE ARRAY  ------->
      const colorList = ["#7FC8A9", "#D5EEBB", "#5F7A61", "#444941"]; // botanic scheme
      // const colorList = ["#1A1A40", "#270082", "#7A0BC0", "#FA58B6"]; // vice scheme

      var randomColor = colorList[Math.floor(Math.random() * colorList.length)];

      // FUNCIÓN DIBUJAR CUADRO
      function drawSquare(x, y, randomColor, lineWidth, borderColor) {
        var screen = document.querySelector("canvas");
        var brush = screen.getContext("2d");
        // grosor de línea borde
        brush.lineWidth = lineWidth;
        // color y tamaño de borde y relleno
        brush.fillStyle = randomColor;
        brush.fillRect(x, y, 25*24, 25*24);
        brush.strokeStyle = borderColor;
        brush.strokeRect(x, y, 25*24, 25*24);
      };

      // VARIABLES ---------->
      var x = 0;
      var y = 0;

      // FUNCIÓN DIBUJAR CUADRICULADO --------->
      while (x < 600, y < 600) {
        randomColor = colorList[Math.floor(Math.random() * colorList.length)];
        drawSquare(x, y, randomColor, 4, "white");
        y = y + 25;
        x = x + 25;
      };

      // while ((x < 800/*, y < 600*/)) {
      //   randomColor = colorList[Math.floor(Math.random() * colorList.length)];
      //   drawSquare(x, y, randomColor, 4, "white");
      //   x = x + 50;
      //   // y = y + 50;
      // };


    </script>
  </body>
</html>