Diseñando una flor | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

4
respuestas

por Matias Julio Grego

| 71.2k xp | 47 posts

Buenas! Les paso algunas flores que hice, muy entretenido. Saludos! Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad

<body>
    <h1>Dibuja Flores</h1>
    <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 dibujaFlor(x, y, radio) {
            dibujarCirculo(x, y, radio, 'red');
            dibujarCirculo(x, y - (radio * 2), radio, 'yellow');
            dibujarCirculo(x, y + (radio * 2), radio, 'blue');
            dibujarCirculo(x - (radio * 2), y, radio, 'orange');
            dibujarCirculo(x + (radio * 2), y, radio, 'black');
        }

        dibujaFlor(300, 200, 20);
        dibujaFlor(210, 200, 10);
        dibujaFlor(390, 200, 10);
        dibujaFlor(210, 200, 10);
        dibujaFlor(390, 200, 10);
        dibujaFlor(300, 110, 5);
        dibujaFlor(300, 290, 5);

    </script>

</body>

4 respuestas

por Jose Gonzalez

| 2169.9k xp | 6782 posts

Instructor

06/01/2022

Hola Matias

Gracias por compartir tu código, está muy bien felicitaciones.

Si tienes alguna pregunta sobre el contenido de los cursos, estaremos aquí para ayudarte.

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

por Juan Cruz Perez

| 37.5k xp | 6 posts

06/01/2022

Hola Matias, te comparto mi respuesta, que tambien tiene una pequena modificación

<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(radio,x,y){
    dibujarCirculo(x,y,radio,"red");
    dibujarCirculo(x+(2*radio),y,radio,"black");
    dibujarCirculo(x-(2*radio),y,radio,"orange");
    dibujarCirculo(x,y-(2*radio),radio,"yellow");
    dibujarCirculo(x,y+(2*radio),radio,"blue");
}


var radioAleatorio = Math.round(Math.random()*50)
var xAleatorio = Math.round(Math.random()*600)
var yAleatorio = Math.round(Math.random()*400)
dibujarFlor(radioAleatorio,xAleatorio,yAleatorio);


</script>

por Juan Cruz Perez

| 37.5k xp | 6 posts

06/01/2022

Hola Matias, te comparto mi respuesta, que tambien tiene una pequena modificación

<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(radio,x,y){
    dibujarCirculo(x,y,radio,"red");
    dibujarCirculo(x+(2*radio),y,radio,"black");
    dibujarCirculo(x-(2*radio),y,radio,"orange");
    dibujarCirculo(x,y-(2*radio),radio,"yellow");
    dibujarCirculo(x,y+(2*radio),radio,"blue");
}


var radioAleatorio = Math.round(Math.random()*50)
var xAleatorio = Math.round(Math.random()*600)
var yAleatorio = Math.round(Math.random()*400)
dibujarFlor(radioAleatorio,xAleatorio,yAleatorio);


</script>

por Matias Julio Grego

| 71.2k xp | 47 posts

06/01/2022

Hola Juan Cruz, muy buena idea! @Jose, gracias! abrazo