1
respuesta

Flor

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

    dibujarCirculo(300, 200, 50, "red");
    dibujarCirculo(300, 300, 50, "blue");
    dibujarCirculo(300, 100, 50, "yellow");

    dibujarCirculo(200, 200, 50, "orange");
    dibujarCirculo(400, 200, 50, "black");

</script>
1 respuesta

¡Hola Mayra!

Por lo que puedo ver, el código que compartiste dibuja cinco círculos en un canvas de 600x400 píxeles, cada uno con un color diferente. Si quieres que estos círculos formen una flor, puedes hacer algunos ajustes en la posición y agregar algunos círculos más. Te sugiero que pruebes con el siguiente código:

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

    // Círculos principales
    dibujarCirculo(300, 200, 50, "red");
    dibujarCirculo(300, 300, 50, "blue");
    dibujarCirculo(300, 100, 50, "yellow");
    dibujarCirculo(200, 200, 50, "orange");
    dibujarCirculo(400, 200, 50, "black");

    // Pétalos
    dibujarCirculo(250, 250, 50, "pink");
    dibujarCirculo(350, 250, 50, "pink");
    dibujarCirculo(250, 150, 50, "pink");
    dibujarCirculo(350, 150, 50, "pink");

    // Centro
    dibujarCirculo(300, 200, 25, "white");

</script>

En este código, agregué cuatro círculos más para formar los pétalos de la flor y un círculo blanco en el centro. También ajusté las posiciones de los círculos principales para que estén más juntos y formen el centro de la flor.

Espero que esto te ayude a lograr lo que buscas. ¡Buenos estudios!

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