Entrar ¿Aún no tienes acceso?
1
respuesta

Diseñando una 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 Irvin Ivan Mendoza
| 23.5k xp | 89 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(){
        dibujarCirculo(300,240,20,"blue");
        dibujarCirculo(300,200,20,"red");
        dibujarCirculo(300,160,20,"yellow");
        dibujarCirculo(260,200,20,"orange");
        dibujarCirculo(340,200,20,"black");

    }

    dibujarflor();




</script>
1 respuesta
por Rafaela Rocha
| 2874.2k xp | 8758 posts
Alura Scuba Team Scuba Team

¡Hola Irvin!

Viendo el código que compartiste, parece que ya tienes una función dibujarflor() que dibuja una flor en el canvas. Si quieres personalizar la flor, puedes cambiar los colores de los círculos que se dibujan en la función. Por ejemplo, si quieres una flor rosa, puedes cambiar el color del círculo más grande a "pink" y el color del círculo azul a "purple". De esta manera, la función quedaría así:

function dibujarflor(){
    dibujarCirculo(300,240,20,"purple");
    dibujarCirculo(300,200,20,"pink");
    dibujarCirculo(300,160,20,"yellow");
    dibujarCirculo(260,200,20,"orange");
    dibujarCirculo(340,200,20,"black");
}

También puedes cambiar las posiciones de los círculos para crear diferentes diseños de flores.

¡Espero haber ayudado y buenos estudios!

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