Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

[Proyecto] ayudaaaaaaaa

Quería hacer un campo de flores pero estoy fallando en algo, ayuda. Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

1 respuesta

Hola Ronald, espero que estés bien.

Puedes lograrlo usando un bucle for anidado. recorriendo tanto la horizontal cuanto la vertical.

Un ejemplo de como puedes hacerlo:

<canvas width="600" height="400"></canvas>
<script>
  var pantalla = document.querySelector("canvas");
  var pincel = pantalla.getContext("2d");

  pincel.fillStyle = "lightgray";
  pincel.fillRect(0, 0, 600, 400);

  var radio = 10;

  function dibujarCirculo(x, y, radio, color) {
    pincel.fillStyle = color;
    pincel.beginPath();
    pincel.arc(x, y, radio, 0, 2 * 2 * 3.14);
    pincel.fill();
  }

  function dibujarFlor(x, y, radio) {
    dibujarCirculo(x, y, radio, "red");
    dibujarCirculo(x + 2 * radio, y, radio, "black");
    dibujarCirculo(x - 2 * radio, y, radio, "orange");
    dibujarCirculo(x, y - 2 * radio, radio, "yellow");
    dibujarCirculo(x, y + 2 * radio, radio, "blue");
  }

  function dibujarCampo(x, y, radio) {
    for (var i = 0; i < 6; i++) {
      for (var j = 0; j < 6; j++) {
        dibujarFlor(x[i], y[j], radio);
      }
    }
  }

  var lasx = [50, 150, 250, 350, 450, 550];
  var lasy = [
    0 + radio * 3,
    100 + radio * 3,
    200 + radio * 3,
    300 + radio * 3,
    400 + radio * 3,
    500 + radio * 3,
  ];

  dibujarCampo(lasx, lasy, radio);
</script>

Si tienes alguna duda, no dejes de preguntar. ¡Estamos aquí para ayudarte!.

¡Saludos!

Si este post te ayudó, por favor, marca como solucionado ✓. Continúa con tus estudios