4
respuestas

Como se podría mejorar ?

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 Misael Joel Calisaya
| 11.7k xp | 28 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 flor(){
            dibujarCirculo(300,260,30,"blue");
            dibujarCirculo(300,200,30,"red");
            dibujarCirculo(300,140,30,"yellow");

            dibujarCirculo(360,200,30,"black");
            dibujarCirculo(240,200,30,"orange");
        }

        flor();        

    </script>
4 respuestas
por Leonardo Ariel D'Ulivo
| 61.4k xp | 45 posts

Hola,

Otra alternativa podría ser trabajar con arrays o con un JSON. Un JSON suele ser el formato de información que devuelve un servidor mediante un API REST.

Por lo tanto, imagina tener una aplicación que dibuje círculos que estén guardado en una base de datos. Sería algo como lo siguiente:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas</title>
</head>
<body>
    <canvas width="600" height="400"></canvas>

    <script>

        const circulos = [
            {
                colors: "blue",
                axisX: 300,
                axisY: 260,
                radio: 30
            },
            {
                colors: "red",
                axisX: 300,
                axisY: 200,
                radio: 30
            },
            {
                colors: "yellow",
                axisX: 300,
                axisY: 140,
                radio: 30
            },
            {
                colors: "black",
                axisX: 360,
                axisY: 200,
                radio: 30
            },
            {
                colors: "orange",
                axisX: 240,
                axisY: 200,
                radio: 30
            },

        ]

        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 flor(){

            circulos.map( (circulo, index) => {
                dibujarCirculo(circulo.axisX, circulo.axisY, circulo.radio, circulo.colors)
            })
        }

        flor();        

    </script>
</body>
</html>
por Leonardo Ariel D'Ulivo
| 61.4k xp | 45 posts

Siguiendo el ejemplo de hacer consulta a una base de datos mediante un servidor, el código quedaría reducido al siguiente:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>canvas</title>
</head>
<body>
    <canvas width="600" height="400"></canvas>

    <script>

        fetch('acá iria la URL del servidor')
            .then( Response => Response.json() )
            .then( json => flor(json) )

        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 flor(data){

            data.map( (circulo, index) => {
                dibujarCirculo(circulo.axisX, circulo.axisY, circulo.radio, circulo.colors)
            })
        }

        flor();        

    </script>
</body>
</html>
por Jorge Mario Oyola Moreno
| 145k xp | 384 posts

Con lo que vimos hasta ahora, está perfecto tu código.

por Nathan Castillo Coto
| 45.8k xp | 30 posts

Yo creo que tambien lo hiciste super bien!

Lo unico es que por ejemplo, yo no lo haria con una función, lo dejaría asi:

<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();
    }

    dibujarCirculo(300,200,30,"red");
    dibujarCirculo(300,260,30,"blue");
    dibujarCirculo(360,200,30,"black");
    dibujarCirculo(240,200,30,"orange");
    dibujarCirculo(300,140,30,"yellow");

</script>