Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
2
respuestas

[Proyecto] Ejercicio flor

Mi flower

<meta charset="utf-8">

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

<script type="text/javascript">

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

    dibujarCirculo(300,200,15,"red");
    dibujarCirculo(300,170,15,"yellow");
    dibujarCirculo(330,200,15,"black");
    dibujarCirculo(300,230,15,"blue");
    dibujarCirculo(270,200,15,"orange");

</script>
2 respuestas

Meti la funcion en otra función como decían, y esa misma en otra para aleatorizar una generación de flores, comparto imagen y códigopagina de html y js que genera una cantidad fija de flores en posiciones y de tamaños al azar

<meta charset="utf-8">

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

<script type="text/javascript">

    var flowerCount = 50;

    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(posx, posy, size) {

        dibujarCirculo(posx,posy,size,"red");
        dibujarCirculo(posx,posy-2*size,size,"yellow");
        dibujarCirculo(posx+2*size,posy,size,"black");
        dibujarCirculo(posx,posy+2*size,size,"blue");
        dibujarCirculo(posx-2*size,posy,size,"orange");
    };

    function randomizeFlowers(count) {
        for (let i=0; i<count; i++) {
            dibujarFlor(
                Math.round(Math.random()*600),
                Math.round(Math.random()*400),
                Math.round(Math.random()*10),
            );
        }
    }
    randomizeFlowers(flowerCount);

</script>

Hola Arturo, espero que estés bien!

Gracias por compartir tu solución, felicitaciones! Espero que estés disfrutando del contenido y las actividades!

Anexo: el foro se centra en las dudas de contenido y actividad, ¡pero apreciamos sus resultados! Te sugiero que compartas tus resultados en el canal de comparte-tu-código de tu grupo en lo servidor en Discord.

Mucho éxito en todo lo que te propongas y si tienes alguna duda aquí estaremos para apoyarte.

¡Vamos juntos!

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