Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
4
respuestas

Como se podría mejorar ?

    <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

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>

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>

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

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>