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 = 'lightgrey';
    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,10,"red");
    dibujarCirculo(300,180,10,"yellow");
    dibujarCirculo(280,200,10,"orange");
    dibujarCirculo(320,200,10,"black");
    dibujarCirculo(300,220,10,"blue");
</script>
1 respuesta

¡Hola Gerardo!

La función dibujarCirculo que has creado en tu código es muy útil para dibujar círculos en el canvas. En este caso, estás dibujando una flor con diferentes colores.

Si quisieras hacer que la flor se mueva, podrías utilizar la función setInterval para llamar a la función dibujarCirculo cada cierto tiempo. Por ejemplo, podrías hacer lo siguiente:

setInterval(function() {
    pincel.fillStyle = 'lightgrey';
    pincel.fillRect(0,0,600,400);
    dibujarCirculo(300,200,10,"red");
    dibujarCirculo(300,180,10,"yellow");
    dibujarCirculo(280,200,10,"orange");
    dibujarCirculo(320,200,10,"black");
    dibujarCirculo(300,220,10,"blue");
}, 1000); // Llama a la función cada 1000 milisegundos (1 segundo)

Este código limpiará el canvas y volverá a dibujar la flor cada segundo. Puedes cambiar el tiempo para que la flor se mueva más rápido o más lento.

Te recomiendo que compartas la solución de tus ejercicios en nuestro servidor de Discord, allí tenemos un canal exclusivo para eso (#compartatucodigo) y el foro solo quedaría para esclarecer cualquier duda que puedas tener sobre el contenido de los cursos.

¡Espero haber ayudado y buenos estudios!