Solucionado (ver solución)
Solucionado
(ver solución)
1
respuesta

Diseñando una flor

Mi solución

<!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>Flor</title>
</head>

<body>
    <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) {
            dibujarCirculo(300, 200, radio, 'red');
            dibujarCirculo(300, 180, radio, 'yellow');
            dibujarCirculo(300, 220, radio, 'blue');
            dibujarCirculo(280, 200, radio, 'orange');
            dibujarCirculo(320, 200, radio, 'black');
        }

        dibujarFlor(11);

    </script>
</body>

</html>

Flor

1 respuesta
solución!

¡Hola Paul!

Gracias por compartir tu solución. Veo que has utilizado HTML y JavaScript para diseñar una flor en un canvas. Me parece una buena solución.

En cuanto al código, todo parece estar bien. Me gusta cómo has utilizado funciones para dibujar los círculos y la flor completa. Esto hace que el código sea más legible y fácil de entender.

La única sugerencia que te haría es que podrías agregar comentarios en el código para explicar lo que hace cada función y cada línea de código. Esto puede ayudar a otros programadores a entender mejor tu solución.

¡Espero haber ayudado y buenos estudios!

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