1
respuesta

Dibujar Flor

Referente al curso Lógica de programación: Practicando con juegos y animaciones, en el capítulo Utilizando funciones y actividad Diseñando una flor

por Jose Angel Quezada Alonso
| 39.2k xp | 9 posts
<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);

  function dibujarCirculo(x, y, radio, color) {

      pincel.fillStyle = color;
      pincel.beginPath();
      pincel.arc(x, y, radio, 0, 2*3.14);
      pincel.fill();
  }
  function dibujarFlor(x,y) {
    dibujarCirculo(x,y,15,"red")
    dibujarCirculo(x-30,y,15,"orange");
    dibujarCirculo(x,y-30,15,"yellow");
    dibujarCirculo(x+30,y,15,"black");
    dibujarCirculo(x,y+30,15,"blue");
  }

  dibujarFlor(300,200);
  dibujarFlor(100,100);
  dibujarFlor(100,300);
  dibujarFlor(500,100);
  dibujarFlor(500,300);

</script>

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

1 respuesta
por Rafaela Rocha
| 2874.2k xp | 8758 posts
Alura Scuba Team Scuba Team

¡Hola Jose!

Gracias por compartir tu código con nosotros. Parece que estás tratando de dibujar una flor en un canvas utilizando JavaScript.

Tu código se ve bien y funciona correctamente. Sin embargo, si quieres hacer que tu flor se vea más realista, podrías agregar algunas líneas para conectar los pétalos.

Por ejemplo, puedes agregar las siguientes líneas de código después de dibujar cada pétalo:

pincel.strokeStyle = "green";
pincel.lineWidth = 5;
pincel.beginPath();
pincel.moveTo(x, y);
pincel.lineTo(x2, y2);
pincel.stroke();

Esto dibujará una línea verde gruesa que conecta el centro de cada pétalo con el centro de los pétalos adyacentes.

¡Espero que esto te ayude a mejorar tu dibujo de la flor! ¡Buenos estudios!

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