4
respuestas

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 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
| 2142.1k xp | 6724 posts
Instructor

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

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

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

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