dibujo-flor-diametro-calculado | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

<!DOCTYPE html>
<html lang="es">

<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>Document</title>
</head>

<body>
    <center>
        <canvas width="600" height="400" style="border: 1px solid #000;"></canvas>
    </center>

    <script>

        let pantalla = document.querySelector("canvas");
        let pincel = pantalla.getContext("2d");
        pincel.fillStyle = "#c8d6e5";
        pincel.fillRect(0, 0, 600, 400);

        function dibujarCirculo(x, y, r, color) {

            pincel.fillStyle = color;
            pincel.beginPath();
            pincel.arc(x, y, r, 0, 2 * 3.14);
            pincel.fill();
        }

        function dibujarFlor(x, y, r) {

            dibujarCirculo(x, y, r, "#ee5253"); // middle 
            dibujarCirculo(x - calculoDiametro(r), y, r, "#ff9f43"); // left
            dibujarCirculo(x + calculoDiametro(r), y, r, "#222f3e"); // right
            dibujarCirculo(x, y - calculoDiametro(r), r, "#feca57"); // up
            dibujarCirculo(x, y + calculoDiametro(r), r, "#2e86de"); // down
        }

        function calculoDiametro(r) {
            return r * 2
        }

        dibujarFlor(300, 200, 18);

    </script>
</body>

</html>

Ingrese aquí la descripción de esta imagen para ayudar con la accesibilidad