Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
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();
    }


    function dibujarFlor(x,y) {

        dibujarCirculo(x,y,20,"red")
        dibujarCirculo(x+40,y,20,"black")
        dibujarCirculo(x,y+40,20,"blue")
        dibujarCirculo(x-40,y,20,"orange")
        dibujarCirculo(x,y-40,20,"yelow")
     }

    dibujarFlor(300,200);


</script>

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

1 respuesta

¡Hola Bryan!

Por lo que veo, tu código utiliza la etiqueta canvas y la API de dibujo en 2D para crear una flor. La función dibujarCirculo te permite dibujar un círculo en la posición y radio especificados y la función dibujarFlor utiliza esta función para dibujar cinco círculos en distintas posiciones para formar una flor.

Si deseas modificar el tamaño de la flor, puedes cambiar los valores de las coordenadas x e y en la función dibujarFlor. Por ejemplo, si cambias la línea "dibujarFlor(300,200);" por "dibujarFlor(100,100);", la flor se dibujará en una posición diferente.

También puedes cambiar los colores de los círculos modificando los valores de los parámetros de la función dibujarCirculo. Por ejemplo, si cambias "red" por "green", el primer círculo será verde.

Espero que esto te ayude a entender mejor el código y a hacer las modificaciones que necesites. ¡Buenos estudios!

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